AJAX记录

var xmlhttp = new XMLHttpRequest(）;创建对象

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyStatus==4 && xmlhttp.STATUS=200)

{

var data = xmlhttp.responseText;

  document.getElementById("name").value=data;

}

}

每一步都有一个状态

function fun1(){
  var xmlhttp = new XMLHttpRequest();  //  1.创建异步对象
  xmlhttp.onreadystatechange=function (){   //2.绑定事件
   <!-- alert("current state====="+xmlhttp.readyState);  -->
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
      //alert(xmlhttp.responseText);
      var data =xmlhttp.responseText;
      document.getElementById("mydata").innerText=data;
    }
  }
  var t = document.getElementById("t").value;
  var w = document.getElementById("w").value;
  var h = document.getElementById("h").value;

  var param = "?t="+t+"&w="+w+"&h="+h ;  //参数
  xmlhttp.open("get","AAmi"+param,true);  //3.初始异步对象

  xmlhttp.send();  //4发送请求
}

 xmlHttp.responseText,  就是服务端返回的数据

jackson依赖

 将 对象转换为json字符串

import com.fasterxml.jackson.databind.ObjectMapper;

ObjectMapper objectMapper = new ObjectMapper();
try {
    String s = objectMapper.writeValueAsString(provice);
    System.out.println(s);
} catch (JsonProcessingException e) {
    e.printStackTrace();
}

{"id":11,"proname":"河北省","prosimplename":"冀"}

 servlet中doGet方法

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String id = request.getParameter("id");
    String res = "{}";
    Provice provice = null;
   // ObjectMapper objectMapper = new ObjectMapper();
    ObjectMapper objectMapper = null;
    if(id!=null && !"".equals(id)){
        ProviceDao proviceDao = new ProviceDao();
         provice = proviceDao.queryProviceById(Integer.valueOf(id));
         System.out.println(provice);
    }
    if(provice!=null){
//将对象转换为json字符串
        objectMapper = new ObjectMapper();
        res = objectMapper.writeValueAsString(provice);
    }

    //response.setContentType("text/html;charset=utf-8");
    response.setContentType("application/json;charset=utf-8");  //返回的数据为json格式
    PrintWriter out = response.getWriter();
    out.print(res);
    out.flush();
    out.close();

AJAX发送请求  发送json请求

jsp文件

<input type="button" id="bt1" value="测试ajax" onclick="fb()">

js文件夹在webapp目录下面和WEB-INF同级

<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script>
   function fb() {
       var data={name:"zs",age:"20"};
       var ff = JSON.stringify(data); //转换为json字符串
       var r={};
       $.ajax({
           url:"f2",
           method:"post",
           dataType:"json",
           data:ff,
           contentType:"application/json",
           success:function (res){   //返回的是json对象
               alert(res.name);
               alert(res.age);
           }
       })
   }
</script>

controller文件

@PostMapping("/f2")
public void f2(@RequestBody Student student, HttpServletResponse response) throws IOException {   //加上@RequestBody注解会把前端上送的json字符串，直接封装到student对象中，如果不加此注解，框架会把 form表单请求的数据封装到student，处理不了json字符串
    System.out.println(student);
   
    ObjectMapper om = new ObjectMapper();
    String jj = om.writeValueAsString(student);

    response.setContentType("application/json");
    PrintWriter writer = response.getWriter();
    writer.print(jj);
    writer.flush();
    writer.close();
}

返回responseBody数据

@RequestMapping("/f3")
@ResponseBody   //返回json字符串，不会通过视图解析器去找视图文件了
public String f3(@RequestBody Student student) throws JsonProcessingException {
    System.out.println(student);
    ObjectMapper objectMapper  = new ObjectMapper();
    String ress = objectMapper.writeValueAsString(student);
    return  ress;
}