Spring MVC框架：第十一章：Ajax

<button id="btn1">实验1：发送零散数据</button>

<script type="text/javascript" src="${pageContext.request.contextPath }/jQuery/jquery-3.2.1.js"></script>
<script type="text/javascript">
  $(function(){
    $("#btn1").click(function(){
      //实验1：发送零散数据
      //请求地址
      var url = "${pageContext.request.contextPath }/one";
      //请求参数
      var param = {"empId":20,"userName":"tom","random":Math.random()};
      //服务器端成功返回响应后的回调函数
      var callBack = function(response){
        console.log(response);
      };
      //服务器端返回的响应体数据的解析方式
      var type = "text";
      //发送POST方式的Ajax请求
      $.post(url, param, callBack, type);
    });
  });
</script>

//@ResponseBody表示使用handler方法的返回值作为响应体，不再前往任何一个视图
  @ResponseBody
  //使用produces="text/html;charset=UTF-8"设置解决响应数据乱码问题
  //如果是JSON数据内容类型是：application/json
  @RequestMapping(value="/one",produces="text/html;charset=UTF-8")
  public String one(
        @RequestParam("empId") Integer empId, 
        @RequestParam("userName") String userName) {
    System.out.println("empId="+empId);
    System.out.println("userName="+userName);
    return "执行成功！！！";
  }

$("#btn2").click(function(){
    //实验2：发送对应POJO的数据
    var url = "${pageContext.request.contextPath }/two";          
    var param = {
        "stuId":5,
        "stuName":"jerry",
        "stuSubject":"java",
        "random":Math.random()
      };          
    var callBack = function(response){
      console.log(response);
    };          
    var type = "text";          
    //发送POST方式的Ajax请求
    $.post(url, param, callBack, type);
});

@ResponseBody
  @RequestMapping(value="/two",produces="text/html;charset=UTF-8")
  public String two(Student student) {
    System.out.println(student);
    return "执行成功！！！";
  }

<button id="btn3">实验3：发送JSON请求体</button>

$("#btn3").click(function(){
  //1.创建数组对象
  var stuArray = new Array();
  //2.准备要存入数组的数据
  var stu01 = {"stuId":11,"stuName":"tom11","stuSubject":"php11"};
  var stu02 = {"stuId":22,"stuName":"tom22","stuSubject":"php22"};
  var stu03 = {"stuId":33,"stuName":"tom33","stuSubject":"php33"};
  //3.存入数组
  stuArray.push(stu01);
  stuArray.push(stu02);
  stuArray.push(stu03);
  //4.将数组对象转换成字符串
  var requestBodyData = JSON.stringify(stuArray);
  //5.发送Ajax请求
  $.ajax({
    "url":"${pageContext.request.contextPath }/three",  //请求地址
    "contentType":"application/json;charset=UTF-8",   //请求体的内容类型
    "data":requestBodyData,               //发送给服务器的数据，将来的请求体
    "dataType":"text",                  //预期服务器返回的响应体类型
    "success":function(response){console.log(response)},//服务器成功返回响应后的回调函数
    "type":"POST"                   //发送请求的请求方式
  });
});

@ResponseBody
@RequestMapping(value="/three",produces="text/html;charset=UTF-8")
//@RequestBody将请求体的JSON数据转换为Java类型
public String three(@RequestBody List<Student> stuList) {     
  for (Student student : stuList) {
    System.out.println(student);
  }
  return "执行成功！！！";
}

<button id="btn4">实验4：接收文本</button>

$("#btn4").click(function(){
  //实验4：接收文本
  var url = "${pageContext.request.contextPath }/four";
  var callBack = function(response) {
    console.log(response);
    console.log(response.stuName);
  };
  //如果服务器返回的是JSON字符串，但是type="text"，那么response将仅仅是一个字符串，
  //不能直接访问JSON数据的属性
  var type = "text";
  $.post(url, callBack, type);
});

@ResponseBody
@RequestMapping(value="/four",produces="text/html;charset=UTF-8")
public String five() {
  return "来自服务器端的回应……";
}

  $("#btn5").click(function(){
    //实验5：接收JSON
    var url = "${pageContext.request.contextPath }/five";
    var callBack = function(response) {
      console.log(response);
      console.log(response.stuName);
      //如果服务器返回的响应体数据无法解析为JSON数据，那么后续操作无法执行，而且没有错误提示。
      //console.log("aaaaaaaaaa........");
    };
    var type = "json";
    $.post(url, callBack, type);
  });

@ResponseBody
@RequestMapping(value="/five",produces="application/json;charset=UTF-8")
public Student four() {
  return new Student(55, "stuName555", "stuSubject555");
}