有关Ajax实现的两种方法

Posted 2020-08-15

首先我们来常见的Jquery式的Ajax写法，以及在java后台的取值

 1 /**
 2  *AJAX
 3  */
 4 function showLastTime(){
 5     var facilityId = $(‘*[name="facilityId"]‘).val();  //页面取值
 6     var mainteType = $("#mainteType").val();  
 7     var mainteWorkNm = $("#mainteWorkNm").val();  
 8     var url = AP_BASE_URL + "c412s/showLastYmd/";  //url的生成
 9     if(facilityId !=""&&mainteType !=""&&mainteWorkNm !=""){
10         $.ajax({
11             async:false,  //false为同步（用户需要等待刷新完才能操作），true为异步（不需要等待，可以进行其他操作）
12             url: url,     //请求的URL
13             type: ‘POST‘, //两种方式POST和GET，POST方式为隐形传输，GET会将所传参数和值拼写在url中（推荐POST）
14             data: {
15                 //以下为所需传递的参数
16                 ‘facilityId‘:facilityId,
17                 ‘mainteTypeCd‘:mainteType,
18                 ‘mainteWorkId‘:mainteWorkNm
19             },
20             //cache: false,
21             error: function(XMLHttpRequest, textStatus, errorThrown){
22                 ajaxError(XMLHttpRequest, textStatus, errorThrown);
23             },
24             success: function(data) {    //data为后台传回的数据
25                 $(".info").html(data);    //收到回传数据后执行的操作
26             }
27         });
28     }else{
29         $(".info").text("");
30     }
31     return false;
32 }

其次为普通JS的Ajax的写法

function showLastTime2(){
    var mainteType = $("#mainteType").val();
    var mainteWorkNm = $("#mainteWorkNm").val();
    var facilityId = $(‘*[name="facilityId"]‘).val();
    var url = AP_BASE_URL + "c412s/showLastYmd2/";
    var xmlhttp;
    //创建XMLHttpRequest 对象
    if (window.XMLHttpRequest){    // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }else{    // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    if(facilityId !=""&&mainteType !=""&&mainteWorkNm !=""){
        xmlhttp.open("POST",url,false);    //向服务器发送请求，false为同步（用户需要等待刷新完才能操作），true为异步（不需要等待，可以进行其他操作）
        xmlhttp.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");    //如果使用POST方式必须添加该行代码，向请求添加 HTTP 头
        xmlhttp.send("mainteTypeCd="+mainteType+"&mainteWorkId="+mainteWorkNm+"&facilityId="+facilityId);    //传参
        xmlhttp.onreadystatechange=function(){    //如果服务器状态改变触发事件
            if(xmlhttp.readyState==4 && xmlhttp.status==200){    //不懂查看下表，大意为在请求完成并且状态为OK时
                $(".info").html(xmlhttp.responseText);    //xmlhttp.responseText为服务器传回的值
            }
        };
    }else{
        $(".info").text("");
    }

 

 

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

后台Java代码取值

1 public String showLastYmd2(HttpServletRequest request HttpServletResponse response){
2     request.getParameter("facilityId")；
3     request.getParameter("mainteTypeCd")；
4     request.getParameter("mainteWorkId")；
5     response.write("data");    //传回参数
6 }