Loading... # **Ajax** ## **目标** ## **一、简介** ****AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。**** * **传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。** * **使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。** * **使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。** ## **二、jQuery.ajax** **Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。** **jQuery 提供多个与 AJAX 有关的方法。** **通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。** **jQuery 不是生产者，而是大自然搬运工。** **jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！** ``` 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 将自动替换 ? 为正确的函数名，以执行回调函数 ``` ****我们来个简单的测试，使用最原始的HttpServletResponse处理 **** **1、配置web.xml 和 springmvc的配置文件** **2、编写index.jsp测试** ``` <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <%-- 导入jquery ， 可以使用在线的CDN ， 也可以下载导入--%> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <%-- <script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script>--%> <script> function test() { $.post({ url: "${pageContext.request.contextPath}/test", data: {'name': $("#name").val()}, success: function (data) { alert(data) } }) } </script> </head> <body> <%--onblur：失去焦点触发事件--%> <input type="text" id="name" onblur="test()"> </body> </html> ``` **3、编写一个AjaxController** ``` @Controller public class AjaxController { @RequestMapping("/test") public void test(String name, HttpServletResponse response) throws IOException { if ("test".equals(name)){ response.getWriter().print("true"); }else { response.getWriter().print("false"); } } } ``` **4、启动tomcat测试！打开浏览器的控制台，当我们鼠标离开输入框的时候，可以看到发出了一个ajax的请求！是后台返回给我们的结果！测试成功！** ## **三、利用ajax获取集合对象** **我们来获取一个集合对象，展示到前端页面** ### **1. 定义实体类** ``` @Data @AllArgsConstructor @NoArgsConstructor public class User { private String name; private int age; private String sex; } ``` ### **2. controller** ``` @RequestMapping("/test2") @ResponseBody public List<User> test2(){ List<User> users = new ArrayList<User>(); users.add(new User("张三",1,"男")); users.add(new User("李四",1,"男")); users.add(new User("王五",1,"男")); return users; } ``` ### **3.jsp** ``` <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> function getUsers() { $.post("${pageContext.request.contextPath}/test2", function (data) { console.log(data) var html = ""; for (var i = 0; i < data.length; i++) { html += "<tr>" + "<td>" + data[i].name + "</td>" + "<td>" + data[i].age + "</td>" + "<td>" + data[i].sex + "</td>" + "</tr>" } $("#content").html(html); } ) } </script> </head> <body> <input type="button" value="获取数据" onclick="getUsers()"> <table> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tbody id="content"></tbody> </table> </body> </html> ``` ### **4. 测试**  ### **5. 可能出现问题**  **这是因为springmvc默认是没有对象转换成json的转换器的，需要手动添加jackson依赖。** **手动添加jackson依赖到pom.xml文件中** ``` <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.11.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.11.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.11.0</version> </dependency> ``` **添加完依赖之后，记得在project structure中的lib中也添加相关依赖！** ## **四、登录提示效果** **我们再测试一个小Demo，思考一下我们平时登录注册时候，输入框后面的实时提示怎么做到的；如何优化** ### **1. Controller** ``` @RequestMapping("/login") public String test3(String name, String psd) { String msg = ""; //模拟数据库中存在数据 if (name != null) { if ("admin".equals(name)) { msg = "OK"; } else { msg = "用户名输入错误"; } } if (psd != null) { if ("123456".equals(psd)) { msg = "OK"; } else { msg = "密码输入有误"; } } return msg; //由于@RestController注解，将msg转成json格式返回 } ``` ### **2. 前端页面 login.jsp** ``` <%-- Created by IntelliJ IDEA. User: dell Date: 2021/3/22 Time: 21:50 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="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> function f1() { $.post({ url: "${pageContext.request.contextPath}/login", data: { 'name': $("#name").val() }, success: function (data) { if (data.toString() == 'OK') { $("#nameInfo").css("color", "green") } else { $("#nameInfo").css("color", "red") } $("#nameInfo").html(data) } } ) } function f2() { $.post({ url: "${pageContext.request.contextPath}/login", data: { 'psd': $("#psd").val() }, success: function (data) { if (data.toString() == 'OK') { $("#psdInfo").css("color", "green") } else { $("#psdInfo").css("color", "red") } $("#psdInfo").html(data) } } ) } </script> </head> <body> 用户名：<input type="text" name="name" id="name" onblur="f1()"/><span id="nameInfo"></span><br> 密码：<input type="text" name="psd" id="psd" onblur="f2()"/><span id="psdInfo"></span> </body> </html> ``` ### **3. 测试**  ### **4. 可能出现问题**  **解决方法** **在springmvc配置中添加一段消息StringHttpMessageConverter转换配置！** ``` <!--解决json乱码--> <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> ``` Last modification：June 4th, 2021 at 10:32 am © 允许规范转载