目录

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

使用Ajax需要导入jQuery

特别注意：

jQuery 中的 AJAX 请求格式

常用案例：表单回显数据

常用案例：用户账号密码的验证

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

Ajax 请求的局部更新，浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

使用Ajax需要导入jQuery

特别注意：

    jQuery,需要导入，注意点：路径问题

两种方式：

方式一：官网下载: 存放本地方式 Download jQuery | jQueryjQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/

方式二：在线导入 网址：CDN- jqueryhttps://cdn.baomitu.com/jquery

jQuery 中的 AJAX 请求格式

$.ajax 方法
        url 表示请求的地址
        data 表示发送给服务器的数据
        success 请求成功，响应的回调函数

ajax 默认是get请求

常用案例：表单回显数据

    @RequestMapping("/a2")    @ResponseBody    public List ajax2() { List list = new ArrayList(); User user1 = new User("秦江1", 1, "男"); User user2 = new User("秦江2", 1, "男"); User user3 = new User("秦江3", 1, "男"); User user4 = new User("秦江4", 1, "男"); list.add(user1); list.add(user2); list.add(user3); list.add(user4); return list;    }

         $(function () { /*点击事件*/ $("#btn").click(function () {     $.post("${pageContext.request.contextPath}/ajax/a2",function (data) {//三部合一 实际中[写法]  刷新和加载不许需要数据  console.log(data);  /*      获取到后端数据   此时让数据摆到table---tbody里面   把data解析 拼接    js 操作DOM元素  增加节点   多个数据遍历  */  var html = "";  for (let i = 0; i <data.length ; i++) {      html +="" +   ""+data[i].name+""+   ""+data[i].age+""+   ""+data[i].sex+""+   ""  }  $("#content").html(html);     }) })    })
    
 
姓名
 
年龄
 
性别
    
    

常用案例：用户账号密码的验证

    @RequestMapping("/a3")    @ResponseBody    public String ajax3(String name,String pwd)  { String msg = ""; if (name!=null) {     if ("admin".equals(name)) {  msg = "ok";     }else {  msg = "用户名有误";     } } if (pwd!=null) {     if ("123456".equals(pwd)) {  msg = "ok";     }else {  msg = "密码输入有误";     } } return msg;    }

                 function a1() {     $.post({  url:"${pageContext.request.contextPath}/ajax/a3",  data:{name:$("#name").val()},  success:function (data) {      if (data.toString()=='ok'){//信息核对成功   $('#userInfo').css("color","green");      }else {   $('#userInfo').css("color","red");      }      $("#userInfo").html(data)  }     }); } function a2() {     $.post("${pageContext.request.contextPath}/ajax/a3",{'pwd':$("#pwd").val()},function (data) {  if (data.toString()=='ok'){//信息核对成功      $('#pwdInfo').css("color","green");  }else {      $('#pwdInfo').css("color","red");  }  $("#pwdInfo").html(data)     }) }    
    用户名：          
    密码：        

个人观点，有不足之处，请大家多批评改正