springmvc:ajax

一.简介

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

利用AJAX可以做：

注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
....等等

jquary ajax

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery 不是生产者，而是大自然搬运工。

jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

二.使用(jquary ajax)

1.导入jquary.js(在线cdn或在线导入)

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

2.controller

@Controller
public class AjaxController {

   @RequestMapping("/a1")
   public void ajax1(String name , HttpServletResponse response) throws IOException{
       if ("admin".equals(name)){
           response.getWriter().print("true");
      }else{
           response.getWriter().print("false");
      }
  }

}

3.index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
   <title>$Title$</title>
  <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
   <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
   <script>
       function a1(){
           $.post({
               url:"${pageContext.request.contextPath}/a1",
               data:{'name':$("#txtName").val()},
               success:function (data,status) {
                   alert(data);
                   alert(status);
              }
          });
      }
   </script>
 </head>
 <body>

<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>

 </body>
</html>

三.获取集合对象(ajax)

实体类user

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {

   private String name;
   private int age;
   private String sex;

}

我们来获取一个集合对象，展示到前端页面

 @RequestMapping("/a2")
    public List<User> a2(){
        ArrayList<User> users = new ArrayList<User>();
        users.add(new User("马云","男",40));
        users.add(new User("马化腾","男",44));
        users.add(new User("王健林","男",30));
        return users; //由于@RestController注解，将list转成json格式返回
    }

前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="${pageContext.request.contextPath}/jquery/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                /*简写:data可以省略

                <%--$.post("${pageContext.request.contextPath}/a2",function () {})*/--%>*/
                $.get("${pageContext.request.contextPath}/a2", function (data) {
                    var html = "";
                    for (let i = 0; i < data.length; i++) {
html+="<tr>"+
    "<td>"+data[i].name+"</td>"+
    "<td>"+data[i].sex+"</td>"+
    "<td>"+data[i].age+"</td>"+
    "</tr>"
                    }
                    $("#concent").html(html)
                })
            })
        })
    </script>

    <title>Title</title>
</head>
<body>
<input type="button" value="点击加载信息" id="btn">

<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tbody id="concent">

    </tbody>
</table>
</body>
</html>