Jquery实现AJAX

首先明白什么是ajax：

就类似于你在访问网站，当你输入一个字段时，下面出现的一系列的推荐栏，这就是ajax的作用，不更新当前地址，但是对页面内容进行响应跟新；

先是spring容器中配置静态资源过滤

 2.然后编写前端页面：利用jquery触发效果 $.post("${pageContext.request.contextPath}/a2",function(data){

//js操作，上面请求到a2控制器，然后data就是后台手动添加的数据，html为每一行数据，

然后我们利用html()方法将每行数据放在一个地方；

})

<%--
  Created by IntelliJ IDEA.
  User: 邬雨航
  Date: 2022/1/17
  Time: 18:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    




    <%--    数据--%>
    

    

        
姓名
        
年龄
        
性别
    
    

3.后台数据的添加

  @RequestMapping("/a2")
    public List a2() {
        List users = new ArrayList<>();
        //添加数据
        users.add(new User("Fairy同学学Java", 1, "男"));
        users.add(new User("ssm不好学", 2, "男"));
        users.add(new User("boot也需要好多时间", 3, "女"));

        return users;
    }

 用ajax验证用户

1.首先是后台控制器对用户进行判断：（这里我们采用死数据，如果用数据库的话，你传入service实现类调用获取用户名密码的方法就可以了，然后将前端传入的数据与之对比，最后实现业务逻辑）

//    这里是一个后台用户验证的简单机制，只需前台传入数据即可，然后验证后返回的结果会交给前端
    @RequestMapping("/a3")
    public String a3(String name, String pwd) {
        String msg = "";
        if (name != null) {
            //对应数据库的操作应该是Mapper接口调用查询方法，对比传入的name看是否存在
            if ("Fairy".equals(name)) {
                msg = "用户名正确";
            } else {
                msg = "用户名错误";
            }
        }
        if (pwd != null) {
            if ("200251411".equals(pwd)) {
                msg = "密码正确";
            } else {
                msg = "密码错误";
            }
        }
        return msg;
    }

这里的msg会返回给前端展示

思路：在输入框中输入数据，利用onblur触动方法a1与a2,1.首先是获取数据data.val()。 2.然后传给url，也就是对应的控制器上。3.然后触发success回调函数，将控制器上返回的结果传给前端：也就是data.toString();最后进行验证，如果满足就添加xxx样式，最后将数据传入到指定位置；

<%--
  Created by IntelliJ IDEA.
  User: 邬雨航
  Date: 2022/1/17
  Time: 21:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    




    用户名:
    


    密码: