ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

SpringMVC-ajax初探

2021-06-01 21:05:58  阅读：160  来源： 互联网

标签：请求 success SpringMVC ajax 初探 users data name


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就是后端返回的数据）

标签：请求,success,SpringMVC,ajax,初探,users,data,name
来源： https://blog.csdn.net/weixin_44424328/article/details/117452570

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有