Ajax请求服务端的五种方式-CFANZ编程社区

Ajax请求服务端的五种方式

方式一（一般方式）
方式二（Get方式）
方式三（Post方式）
方式四（Load方式）
方式五（JSON方式）

首先要引入jQuery

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

下载jQuery：https://jquery.com/download/

方式一（一般方式）

框架：

$.ajax({
  url:“服务器地址“,
  type:”get“|"post",
  data:{请求数据},
  success:function(result,testStatus){
      //请求成功回调函数处理代码
  },
  error:function(xhr,errrorMessage,e){
      //请求失败回调函数处理代码
  }
});

实现

index.jsp

function register()
  {
      var $mobile = $("#mobile").val();
      
      $.ajax({
        url:"MobileServlet",
        请求方式:"post",
        data:"mobile="+$mobile, 
        success:function(result,testStatus)
        {
          if(result == "true"){
            alert("已存在！注册失败！");
          }else{
            alert("注册成功！");
          }
        },
        error:function(xhr,errrorMessage,e){
          alert("系统异常！");
        }


        });
        }
<body>
    手机：<input  id="mobile"/>
    <br/>
    <input type="button" value="注册" onclick="register()" />
    <span id="tip"></span>

</body>

Servlet （下同）

request.setCharacterEncoding("utf-8");
      response.setCharacterEncoding("utf-8");
      response.setContentType("text/html; charset=UTF-8");
      String mobile =  request.getParameter("mobile") ;
      //假设此时 数据库中 只有一个号码：18888888888  
      PrintWriter out = response.getWriter();
      if("18888888888".equals(mobile)) {

          out.write("true");//servlet以输出流的方式  将信息 返回给客户端

      }else {

        out.write("false");

      }
      out.close();

方式二（Get方式）

框架

$.get(
服务器地址,
请求数据,
function (result){

},
预期返回值类型（string\xml）
);

2、代码实现

$.get(
          "MobileServlet",
          "mobile="+$mobile,
        function (result){
            if(result == "true"){
              alert("已存在！注册失败！");
            }else{
              alert("注册成功！");
            }
        }
        );

方式三（Post方式）

1、格式

$.post(
服务器地址,
请求数据,
function (result){

},
  "xml" 或 "json" 或 "text" 
);

2、代码实现

$.post(
        "MobileServlet",
        "mobile="+$mobile,
      function (result){
          if(result == "true"){
            alert("已存在！注册失败！");
          }else{
            alert("注册成功！");
          }
      },
      "text"
      );

方式四（Load方式）

1、格式

$(xxx).load(
服务器地址,
请求数据
);

load:将服务端的返回值  直接加载到$(xxx)所选择的元素中

2、代码实现

$("#tip").load(
          "MobileServlet",
          "mobile="+$mobile
      );

方式五（JSON方式）

1、格式

$.getJSON(
服务器地址,
JSON格式的请求数据,
function (result){

}

);

2、代码实现

var student = {"name":"zs" ,  "age":23} ;
    var students =[
        
        {"name":"zs" ,  "age":23} ,
        {"name":"ls" ,  "age":24} ,
        {"name":"ww" ,  "age":25} 
        
    ];
    alert(students[1].name +"--" +students[1].age) ;
    
    $.getJSON(
        "MobileServlet",
        {"mobile":$mobile},
      function (result){//msg:true|false
          alert(123);
          if(result.msg == "true"){
            alert("已存在！注册失败！");
          }else{
            alert("注册成功！");
          }
      }

    );