简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

异步模拟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
 function go() {
     const url = document.getElementById("url").value;
     document.getElementById("iframe1").src=url;
 }
</script>
<div>
 <p>输入地址</p>
 <input type="text" id="url">
  <input type="submit" onclick="go()">
</div>
<div>
    <iframe id="iframe1" height="600px" width="1300px"></iframe>
</div>
</body>
</html>

依赖导入

需自行到官网下载

<script src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>

测试

<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/3/20
  Time: 11:23
  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}/js/jquery-3.6.0.js"></script>
    <script>
      function a(){
        $.post({
          url:"${pageContext.request.contextPath}/a1",
          data:{"name":$("#username").val()},
          success:function (data){
            alert(data);
          }
        })


      }
    </script>
  </head>
  <body>
  <!--onblur 失去焦点事件-->
用户名：<input id="username" type="text" onblur="a()">
  </body>
</html>

$.post(),需要几个参数 url 代表要传递的地址

data 以键值对的方式，代表要传递的数据

success：以函数的方式，代表成功返回数据后进行的操作

SpringMvc 实现

实现数据回显

@RequestMapping("/a2")
@ResponseBody
    public List<User> a2(){
        List<User> list=new ArrayList<User>() ;
        list.add(new User(18,"lin",1));
        list.add(new User(18,"lin",2));
        return list;

    }

前端界面

<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/3/21
  Time: 12:00
  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}/js/jquery-3.6.0.js"></script>
    <script>
        $(function (){
            $("#btn").click(function (){
                $.post("${pageContext.request.contextPath}/a2",function (data){
                    console.log(data);
                    var html="";
                    for (let i = 0; i < data.length; i++) {
                        html+="<tr>"
                            +"<td>"+data[i].age+"</td>"
                            +"<td>"+data[i].name+"</td>"
                            +"<td>"+data[i].id+"</td>"
                            "</tr>"
                    }
                    $("#content").html(html);
                })
            })
        });



    </script>
</head>
<input type="button" id="btn" value="加载数据">
<body>
<table>
    <tr>
    <td>年龄</td>
    <td>名字</td>
    <td>id</td>
    </tr>
    <tbody id="content">

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

密码验证demo

@RequestMapping(value = "/a3",method = RequestMethod.GET)
    @ResponseBody
    public String a3(String name){
        String result="";
        if(name!=null){
            if ("admin".equals(name)){
                return "ok";
            }
            else return "用户名错误";
        }
        else return "请输入用户名";


    }
    @RequestMapping(value = "/a3",method = RequestMethod.POST)
    @ResponseBody
    public String a4(String pwd){
        String result="";
        if(pwd !=null){
            if ("123456".equals(pwd)){
                return "ok";
            }
            else return "密码错误";
        }
        else return "请输入密码";


    }

前端页面

<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/3/21
  Time: 14:22
  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}/js/jquery-3.6.0.js"></script>
    <script>
        function a1(){
            $.get({
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
                success:function (data){
                    $("#nameinfo").html(data);
                    console.log(data);
                }
            })
        }
        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data){

                    $("#pwdinfo").html(data);
                    console.log(data);
                }
            })

        }
    </script>
</head>
<body>
<p>
用户名：<input type="text" id="name" onblur="a1()">
<span id="nameinfo"></span>
</p>
<p>
    密码：<input type="password" id="pwd" onblur="a2()">
    <span id="pwdinfo"></span>
</p>

</body>
</html>

乱码问题

在对应位置添加以下代码

1.web.xml

<filter>
        <filter-name>encode</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encode</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

2.spring 配置文件

<mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

注意

如果将两个文本框的判断写在同一个方法下

当只点击文本框1时会对文本框2也进行判断但由于此时只传入了文本框1，因此文本框2对应的数据是null 当点击后不输入值传递的是""(空串)

SpringMvc-Ajax

简介