SpringMVC-ajax

Filwaod 2021-01-27 21:56:48

分类专栏： SpringMVC 文章标签： ajax springmvc

本文链接：https://blog.csdn.net/qq_42665745/article/details/113275414

版权

简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。
Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
就和国内百度的搜索框一样!
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

为了方便学习，直接学习JQuery的ajax：

jQuery.ajax(...)
      部分参数：
            url：请求地址
            type：请求方式，GET、POST（1.9.0之后用method）
        headers：请求头
            data：要发送的数据
    contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
          async：是否异步
        timeout：设置请求超时时间（毫秒）
      beforeSend：发送请求前执行的函数(全局)
        complete：完成之后执行的回调函数(全局)
        success：成功之后执行的回调函数(全局)
          error：失败之后执行的回调函数(全局)
        accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
        dataType：将服务器端返回的数据转换成指定类型
          "xml": 将服务器端返回的内容转换成xml格式
          "text": 将服务器端返回的内容转换成普通文本格式
          "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
        "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
          "json": 将服务器端返回的内容转换成相应的JavaScript对象
        "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

简单测试ajax
1.创建一个moudle，添加web依赖
web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--前端控制器-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:appliactionContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--字符编码过滤器-->
    <filter>
        <filter-name>encoding</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>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--扫描包下的注解-->
    <context:component-scan base-package="com.kuang.controller"/>
    <!--静态资源过滤-->
    <mvc:default-servlet-handler/>
    <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>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB/INF/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

</beans>

2.编写一个controller

@RestController
public class AjaxController {

    @RequestMapping("/ajax")
    public void ajax(@RequestParam("userName") String name, HttpServletResponse response) throws IOException {
        if ("张三".equals(name)){
            response.getWriter().write("true");
        }else {
            response.getWriter().write("false");
        }
    }
}

3.编写index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>index.jsp</title>
    //导入js文件
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script>
      //失去焦点触发此函数
      function a(){
        //ajax发送post请求
        $.post({
          //请求的控制器
          url:"${pageContext.request.contextPath}/ajax",
          //传递的数据
          data:{"userName":$("#userName").val()},
          //成功使得回调函数
          success:function (data){
            alert(data);
          },
          error:function (data){
            alert(data+"!!!!");
          }
        })
      }

    </script>
  </head>
  <body>
    用户名:<input type="text" name="userName" id="userName" onblur="a()">
  </body>
</html>

4.启动tomcat，F12打开浏览器的控制台，点击输入框，离开输入框，可以看到发送了一个叫ajax名字的xhr类型的请求，这就是ajax发送的。
在这里插入图片描述

测试controller层传数据给前端并显示
1.编写实体类User

public class User {
    private int id;
    private String name;
    private String sex;

    public User(int id, String name, String sex) {
        this.id = id;
        this.name = name;
        this.sex = sex;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }
}

2.编写controller

    @RequestMapping("/a2")
    public List<User> a2(){
        List<User> list = new ArrayList<User>();
        list.add(new User(1,"张三","男"));
        list.add(new User(2,"李四","男"));
        list.add(new User(3,"王五","男"));
        return list;
    }

3.编写前端界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script>
        $(function (){
            $("#btn").click(function (){
                $.post({
                    url:"${pageContext.request.contextPath}/a2",
                    success:function (data){
                        var html="";
                        for (var i = 0; i < data.length; i++) {
                            html+= "<tr>" +
                                "<td>" + data[i].id + "</td>" +
                                "<td>" + data[i].name + "</td>" +
                                "<td>" + data[i].sex + "</td>" +
                                "</tr>"
                        }
                        $("#content").html(html);
                    },
                    error:function (data){
                        alert("error");
                    }
                })
            })
        })

    </script>
</head>
<body>
<button id="btn">获取数据</button>
<table border="1" width="80%">
    <tr>
        <td>ID</td>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    <tbody id="content">

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

ajax模拟用户名密码验证
1.编写控制器

    @RequestMapping("/a3")
    public String a3(String username,String password){
        String msg="";
        if (username!=null){
            if ("admin".equals(username)){
                msg="OK";
            }else {
                msg="用户名错误";
            }
        }
        if (password!=null){
            if ("123456".equals(password)){
                msg="OK";
            }else {
                msg="密码错误";
            }
        }
        return msg;
    }

这里遇到了一个坑，我最开始在写控制器的时候是这样写的public String a3(@RequestParam(“username”) String username,@RequestParam(“password”)String password)，然后测试提示无效的请求，意思的必须要同时把username和password同时传到后台才算有效请求，所以不要@RequestParam（）注解。

2.编写前端界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script>
        function x(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"username":$("#username").val()},
                success:function (data){
                    if (data.toString()=="OK"){
                        $("#uspan").css("color","green");
                    }else {
                        $("#uspan").css("color","red");
                    }
                    $("#uspan").html(data);
                }
            })
        }
        function y(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"password":$("#password").val()},
                success:function (data){
                    if (data.toString()=="OK"){
                        $("#pspan").css("color","green");
                    }else {
                        $("#pspan").css("color","red");
                    }
                    $("#pspan").html(data);
                }
            })
        }
    </script>
</head>
<body>
用户名：<input type="text" id="username" onblur="x()"><span id="uspan"></span><br/>
密码：<input type="text" id="password" onblur="y()"><span id="pspan"></span><br/>
</body>
</html>