SpringMVC Ajax初步学习

通过Jquery来实现Ajax

环境搭建

在网上下载好Jquery文件
在web项目创建好文件夹存放jQuery文件

简单代码测试


在sptingmvc配置文件插入语句 开启静态资源过滤
<mvc:default-servlet-handler />
index.jsp代码

<%--
  Created by IntelliJ IDEA.
  User: 郑佳杰
  Date: 2021/5/3
  Time: 20:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script>
      function a(){
        $.post({
          url:"${pageContext.request.contextPath}/a1",
          data:{"name":$("#username").val()},
          success:function (data) {
            alert(data)
          }
        })
      }
      $.ajax()
    </script>
  </head>
  <body>
    <!--失去焦点时发送一个请求到后台-->
    用户名<input type="text" id="username" onblur="a()">
  </body>
</html>

controller

package controller;

import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@RestController
public class AjaxController {
    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("param:"+name);
        if("test".equals(name)){
            response.getWriter().print("true");
        }
        else {
            response.getWriter().print("false");
        }
    }
}

效果
当离开输入框时会有提示

异步加载数据

主页面

<%--
  Created by IntelliJ IDEA.
  User: 郑佳杰
  Date: 2021/5/4
  Time: 17:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script>
        $(function(){
            $("#btn").click(function () {
                /*
                $.post(url,param可忽略,success回调函数)
                */
                $.post("${pageContext.request.contextPath}/a2",function (data){
                    //console.log(data);
                    let html = "";
                    for (let i = 0; i <data.length ; i++) {
                        html+= "<tr>" +
                            "<td>" + data[i].name + "</td>" +
                            "<td>" + data[i].age + "</td>" +
                            "<td>" + data[i].sex + "</td>" +
                            "</tr>"
                    }
                    $("#content").html(html);
                })
            })
        });
    </script>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">

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

控制类

package controller;

import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import pojo.User;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@RestController
public class AjaxController {
    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("param:"+name);
        if("test".equals(name)){
            response.getWriter().print("true");
        }
        else {
            response.getWriter().print("false");
        }
    }
    @RequestMapping("/a2")
    public List<User> a2(){
        List userList=new ArrayList<User>();
        userList.add(new User("jie",20,"男"));
        userList.add(new User("jie2",21,"男"));
        userList.add(new User("jie3",22,"男"));
        return userList;
    }
}

效果 点击加载数据后会出现数据

posted @ 2021-05-04 11:31  一个经常掉线的人  阅读(45)  评论(0)    收藏  举报