SpringMVC-ajax初探

2024-04-03 23:03:16

springMVC-ajax初探

ajax

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

原生的我不会用，目前只会使用jquery来使用ajax完成异步刷新

定义和用法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法

$.ajax({name:value, name:value, ... })

该参数规定 AJAX 请求的一个或多个名称/值对。

下面的表格中列出了可能的名称/值：

名称 值/描述
async 布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr) 发送请求前运行的函数。
cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType 发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
context 为所有 AJAX 相关的回调函数规定 “this” 值。
data 规定要发送到服务器的数据。
dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
dataType 预期的服务器响应的数据类型。
error(xhr,status,error) 如果请求失败要运行的函数。
global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp 在一个 jsonp 中重写回调函数的字符串。
jsonpCallback 在一个 jsonp 中规定回调函数的名称。
password 规定在 HTTP 访问认证请求中使用的密码。
processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset 规定请求的字符集。
success(result,status,xhr) 当请求成功时运行的函数。
timeout 设置本地的请求超时时间（以毫秒计）。
traditional 布尔值，规定是否使用参数序列化的传统样式。
type 规定请求的类型（GET 或 POST）。
url 规定发送请求的 URL。默认是当前页面。
username 规定在 HTTP 访问认证请求中使用的用户名。
xhr 用于创建 XMLHttpRequest 对象的函数。

他本身有很多参数，但是用到基本多是一个架构的东西，记住url，data，success（data）就差不多了

$.ajax({
  url : "xxxxxx", //与后端交互的地址，发起的请求
  data : {"xxx" : $("#xx").val()},//前端传给后端的值，使用json的形式
  success : function (data) { // 载入成功的回调函数（里面的data是后端返回过来的数据）
    console.log(data);
  }
});

例子

还是用几个例子来说明，使用springMVC一个框架就可以完成这些例子

  1. 第一个例子，一个输入框，失去焦点后，在控制台打印后端传来的值
  • jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>ajax jquery</title>
    <%--使用jquery需要导入jquery文件
      ${pageContext.request.contextPath} 获得绝对路径
     --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-3.6.0.js"></script>
  </head>
  <body>
  <div>
    <p>用户名</p>
    <%-- onblur 失去焦点--%>
    <input type="text" id="userName" οnblur="a()"/>
  </div>
  </body>

<script type="text/javascript">
  function a(){
    /*
    使用ajax的参数
    url: 待载入的页面，与后端交互的地址
    data：前端传过去的数据，key-value键值对
    success：载入成功的回调函数（里面的data是后端返回过来的数据）
    ajax 默认是get请求
    使用post的话 $.post({});
     */
    $.ajax({
      url : "${pageContext.request.contextPath}/ajax/test1",
      data : {"name" : $("#userName").val()},
      success : function (data) {
        console.log(data);
      }
    });
  }

</script>
</html>
  • controller
@GetMapping("/test1")
@ResponseBody
public String test1(String name){
    return name + "你好！世界！";
}

注意：记得导入jquery文件 可能出现的问题： json返回前端乱码的问题，访问不到静态资源

  • json返回乱码是因为@ResponseBody这个注解默认的编码不是utf-8，导致前端接受到乱码，解决方法，就是在springmvc的配置文件中加
<mvc:annotation-driven>
    <mvc:message-converters register-defaults="true">
        <bean class="org.springframework.http.converter.StringHttpMessageConverter">
            <property name="supportedMediaTypes">
                <list>
                    <value>text/html;charset=UTF-8</value>
                    <value>application/json;charset=UTF-8</value>
                </list>
            </property>
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>
  • 访问不到静态资源，两种可能，先检查自己是否把静态资源放在了WEB-INF目录下。如果在WEB-INF目录下需要配置静态资源的映射。如果放在外面，需要在springmvc配置文件中加静态资源过滤
<!-- 静态资源过滤 必须放在WEB-INF外 -->
<mvc:default-servlet-handler/>
<!-- 放在WEB-INF下的话就配置这个映射
	mapping：映射地址
	location：本地地址
-->
<mvc:resources mapping="/XXX" location="/XXX"/>
  1. 第二个例子，后端传一个list的json字符串，前端解析后在table中显示
  • jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax2</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-3.6.0.js"></script>
</head>
<body>
<div>
    <input type="button" id="btn" value="获取" οnclick="on()"/>
    <table width="400px">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tbody id="content"></tbody>
    </table>
</div>

<script type="text/javascript">
    function on(){
        $.post({
            url : "${pageContext.request.contextPath}/ajax/test2",
            success : function (data) {
                console.log(data);
                var users = JSON.parse(data); //将json转换为js对象
                var html = "";
                for(var i = 0; i < users.length; ++i){
                    html += "<tr>" +
                    "<td>" + users[i].name + "</td>" +
                    "<td>" + users[i].age + "</td>" +
                    "<td>" + users[i].sex + "</td>" +
                    "</tr>"
                }
                $("#content").html(html); //将html语言加进content中
            }
        });
    }
</script>
</body>
</html>
  • controller
@PostMapping("/test2")
@ResponseBody
public String test2() throws JsonProcessingException {
    ObjectMapper mapper = new ObjectMapper();
    List<User> users = new ArrayList<>();
    User user = new User("小明",17,"男");
    User user2 = new User("小红",16,"女");
    User user3 = new User("张三",40,"男");

    users.add(user);
    users.add(user2);
    users.add(user3);
    System.out.println(mapper.writeValueAsString(users));
    return mapper.writeValueAsString(users); //传json过去
}

注意： 记得导入jquery文件，因为这里使用的是jackson，所以要记得导依赖

  1. 第三个例子就是，注册验证
  • jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax3</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-3.6.0.js"></script>
</head>
<body>
<p>
    用户：
    <input type="text" id="name" οnblur="a1()"/>
    <span id="userInfo"></span>
</p>
<p>
    密码：
    <input type="text" id="pwd" οnblur="a2()"/>
    <span id="pwdInfo"></span>
</p>

<script type="text/javascript">
    function a1(){
        $.post({
            url : "${pageContext.request.contextPath}/ajax/test3",
            data : {"name" : $("#name").val()},
            success : function (data) {
                $("#userInfo").html(data);
            }
        });
    }

    function a2(){
        $.post({
            url : "${pageContext.request.contextPath}/ajax/test3",
            data : {"pwd" : $("#pwd").val()},
            success : function (data) {
                $("#pwdInfo").html(data);
            }
        });
    }
</script>
</body>
</html>
  • controller
@PostMapping("/test3")
@ResponseBody
public String test3(String name,String pwd){
    String msg = "";
    if(name != null) {
        if ("admin".equals(name)) {
            msg = "ok";
        } else msg = "用户名重复";
    }
    if(pwd != null) {
        if ("123456".equals(pwd)) {
            msg = "ok";
        } else msg = "密码重复";
    }
    return msg;
}

注意：导jquery文件

总结

ajax异步响应，不需要刷新页面，就可以与后端交互数据并刷新页面的一些数据

需要记得jquery使用ajax中几个参数

url：与后端交互的地址

data：前端传给后端的数据，使用json形式

success：成功的回调函数 （他里面的data就是后端返回的数据）

上一篇：微信小程序下载视频或者照片或者文件到本地相册中


下一篇：Fatal error in , line 0 # Check failed: U_SUCCESS(status). # # # #FailureMessage Object: 0000008DAB0