SpringMVC(3)：AJAX
一，AJAX 简介
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法
- AJAX 最大的优点是在不重新加载整个页面的情况下，能与服务器交换数据并更新部分网页内容
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行
二，用前端标签伪造一个AJAX
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页，但是使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
我们可以使用前端的一个标签来伪造一个ajax的样子； iframe标签
要求：在不刷新网页的情况下加载出百度
代码
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>Shandx</title>
6 </head>
7 <body>
8
9 <script type="text/javascript">
10
11 function LoadPage(){
12 var targetUrl = document.getElementById('url').value;
13 console.log(targetUrl);
14 document.getElementById("iframePosition").src = targetUrl;
15 }
16
17 </script>
18
19 <div>
20
21 <p>
22 <h3>请输入要加载的地址：</h3>
23 <input id="url" type="text" value="https://www.baidu.com/"/>
24 <input type="button" value="提交" onclick="LoadPage()">
25 </p>
26
27 </div>
28
29 <div>
30 <h3>加载页面位置：</h3>
31 <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
32 </div>
33
34 </body>
35 </html>
运行结果
三，jQuery.Ajax 简介
- Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据
- jQuery 提供多个与 AJAX 有关的方法，通过 jQuery AJAX 方法，我们能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON；同时我们能够把这些外部数据直接载入网页的被选元素中
- jQuery 不是生产者，而是大自然搬运工；jQuery Ajax本质就是 XMLHttpRequest
四，代码小测试
使用jQuery时我们要先导入jQuery的jar包
下载地址：https://mvnrepository.com/artifact/org.webjars.bower/jquery/3.4.1
1，使用最原始的HttpServletResponse处理
编写一个Ajax Controller
1 @Controller
2 @RequestMapping("/ajax")
3 public class AjaxController {
4
5 @RequestMapping("/a1")
6 public void ajax1(String name , HttpServletResponse response) throws IOException {
7 if ("admin".equals(name)){
8 response.getWriter().print("true");
9 }else{
10 response.getWriter().print("false");
11 }
12 }
13
14 }
编写index.jsp测试
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <head>
3 <title>ajax</title>
4
5 <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
6 <script>
7
8 /* jQuery.post(...) 所有参数：
9 url: 待载入页面的URL地址 (必填)
10 data: 待发送 Key/value 参数
11 success: 载入成功时回调函数
12 data:请求返回的数据
13 status：请求返回的状态*/
14
15 function a1(){
16 $.post({
17 url:"${pageContext.request.contextPath}/ajax/a1",
18 data:{'name':$("#txtName").val()},
19 success:function (data,status) {
20 console.log(data);
21 console.log(status);
22 }
23 });
24 }
25
26 </script>
27 </head>
28 <body>
29
30 <%--onblur：失去焦点触发事件--%>
31 用户名:<input type="text" id="txtName" onblur="a1()"/>
32
33 </body>
运行结果
2，SpringMVC实现
编写一个Controller
1 @RequestMapping("/a2")
2 @ResponseBody
3 public List<User> ajax2(){
4 List<User> list = new ArrayList<User>();
5 list.add(new User("钢铁侠",1,"男"));
6 list.add(new User("蜘蛛侠",2,"男"));
7 list.add(new User("闪电侠",3,"男"));
8 return list; //由于@ResponseBody注解，将list转成json格式返回
9 }
10 ```
11 **编写index2.jsp测试**
12
13 ```
14 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
15 <html>
16 <head>
17 <title>Title</title>
18 </head>
19 <body>
20
21 <input type="button" id="btn" value="获取数据"/>
22 <table width="80%" align="center">
23 <tr>
24 <td>姓名</td>
25 <td>年龄</td>
26 <td>性别</td>
27 </tr>
28 <tbody id="content">
29 </tbody>
30 </table>
31
32 <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
33
34 <script>
35 $(function () {
36 $("#btn").click(function () {
37 $.post("${pageContext.request.contextPath}/ajax/a2",function (data) {
38 console.log(data);
39 var html = "";
40 for (var i=0;i<data.length;i++){
41 html += "<tr>" +
42 "<td>"+data[i].name + "</td>" +
43 "<td>"+data[i].age + "</td>" +
44 "<td>"+data[i].sex + "</td>" +
45 "</tr>"
46 }
47 $("#content").html(html);
48 })
49 })
50 })
51 </script>
52
53 </body>
54 </html>
运行结果
3，注册提示
编写一个Controller
1 @RequestMapping("/a3")
2 @ResponseBody
3 public String ajax3(String name,String pwd){
4
5 String msg = "";
6 //模拟数据库中存在数据
7 if (name!=null){
8 if ("admin".equals(name)){
9 msg = "OK";
10 }else {
11 msg = "用户名输入错误";
12 }
13 }
14 if (pwd!=null){
15 if ("123456".equals(pwd)){
16 msg = "OK";
17 }else {
18 msg = "密码输入有误";
19 }
20 }
21 return msg; //由于@ResponseBody注解，将list转成json格式返回
22 }
编写index3.jsp测试
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>ajax</title>
5 <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
6 <script>
7
8 function a1() {
9 $.post({
10 url: "${pageContext.request.contextPath}/ajax/a3",
11 data: {'name': $("#name").val()},
12 success: function (data) {
13 if (data.toString() == 'OK') {
14 $("#userInfo").css("color", "green");
15 } else {
16 $("#userInfo").css("color", "red");
17 }
18 $("#userInfo").html(data);
19 }
20 });
21 }
22
23 function a2() {
24 $.post({
25 url: "${pageContext.request.contextPath}/ajax/a3",
26 data: {'pwd': $("#pwd").val()},
27 success: function (data) {
28 if (data.toString() == 'OK') {
29 $("#pwdInfo").css("color", "green");
30 } else {
31 $("#pwdInfo").css("color", "red");
32 }
33 $("#pwdInfo").html(data);
34
35 }
36 });
37 }
38
39 </script>
40 </head>
41 <body>
42 <p>
43 用户名:<input type="text" id="name" onblur="a1()"/>
44 <span id="userInfo"></span>
45 </p>
46 <p>
47 密码:<input type="text" id="pwd" onblur="a2()"/>
48 <span id="pwdInfo"></span>
49 </p>
50 </body>
51 </html>
运行结果
SpringMVC(3)：AJAX的更多相关文章
- springmvc配置一：ajax请求防止返回中文乱码配置说明
Spring3.0 MVC @ResponseBody 的作用是把返回值直接写到HTTP response body里. Spring使用AnnotationMethodHandlerAdapter的 ...
- SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析
SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...
- 一步步学习javascript基础篇（9）：ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
- jQuery系列：Ajax
1. load(url, [data], [callback]) 1.1 解析 载入远程 HTML 文件代码并插入至 DOM 中. 语法格式: load(url, [data], [callback] ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- spring mvc 第二天【注解实现springmvc Handler处理ajax简单请求 的配置】
这里使用的是在前台发起ajax请求Handler,后台伪造数据响应给前台, 配置对应ajax请求的Handler信息如下 @Controller public class MyController { ...
- 实战：ajax带参数请求slim API
restful api 支持get,post,put,delete等方法,那么jquery客户端怎么去实现呢?涉及到跨域又怎么办? 很多时候需要传递一个token(api_key) 去识别用户身份,获 ...
- Jquery：ajax跨域请求处理
昨天朋友想做个图片懒加载的效果,朋友是前端的,我这边给他提供数据,程序写好了放到服务器上,本地测试访问时却报jquery跨域的问题,于是找度娘了解了一下jquey如何处理,网上有很多参考文章,但没细看 ...
- 触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
随机推荐
- 【java+selenium3】自动化截图 (十四)
一.截图 1. Firefox浏览器截图 FirefoxDriver firefoxDriver = new FirefoxDriver(); firefoxDriver.getScreenshotA ...
- C 数组类型语法总结
数组类型语法总结 数组指针 和 指针数组 区分 数组指针是一个指针,只对应类型的数组.指针数组是一个数组,其中每个元素都是指针 数组指针遵循指针运算法则.指针数组拥有c语言数组的各种特性 数组类型重命 ...
- storm提交拓扑报错processing getcomponentpendingprofileactions
storm提交新的拓扑,拓扑能提交成功,但是在UI界面查看时每个bolt报错Thrift.processing getComponentPendingProfileActions异常. 原因:stor ...
- hudi clustering 数据聚集（三 zorder使用）
目前最新的 hudi 版本为 0.9,暂时还不支持 zorder 功能,但 master 分支已经合入了(RFC-28),所以可以自己编译 master 分支,提前体验下 zorder 效果. 环境 ...
- Mac 安装 RabbitMQ 出现的问题
安装 RabbitMQ 在官网这里按照步骤来就行 出现Error: Permission denied @ apply2files - /usr/local/lib/docker/cli-plugin ...
- SpringCloud升级之路2020.0.x版-34.验证重试配置正确性(3)
本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 我们继续上一节针对我们的重试进行测试 验证针对可重试的方法响应超时异常重试正确 我们可以通 ...
- ipython和pip，模块安装方法
先下载 pip-.tar.gz 解压文件 cmd进入这个加压后的文件 执行 python setup.py install 然后配置环境变量 把 python 下的 Scripts 文件目录添加到 P ...
- [bzoj1927]星际竞速
考虑没有爆发,那么相当于是带权最小不可交路径覆盖,由于只能从编号小的到编号大的,因此一定是DAG,而DAG的最小路径覆盖可以拆点并跑最大流,那么带权的只需要跑费用流即可(S向i连(1,0)的边,i'向 ...
- [atARC103D]Robot Arms
合法的必要条件是每个点两维坐标和奇偶性相同,同时这也是充分条件 令$d_{i}=\{2^{0},2^{1},...,2^{m-1}\}$,归纳其可以走到任意满足$|x|+|y|<2^{m}$的$ ...
- buu misc 1-32 wp
buuCTFwp(1~32) 1.签到题 题里就有flag flag{buu_ctf} 2.二维码 1.题目是一个二维码,用010发现提示四位数字,想到应该是暗藏压缩包 2.虚拟机foremost分离 ...