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( ...
随机推荐
- docker容器命令（一）
容器命令 创建容器:docker run 参数: -it 交互 -d 后台 –name 容器名 -p 主机端口:容器端口 (主机端口映射到docker端口) docker run --name cen ...
- 在代码生成工具Database2Sharp中增加Vue&Element 工作流页面的快速生成
在我们基于框架开发系统的时候,往往对一些应用场景的页面对进行了归纳总结,因此对大多数情况下的页面呈现逻辑都做了清晰的分析,因此在我们基于框架的基础上,增量式开发业务功能的时候,能够事半功倍.代码生成工 ...
- golang常用库：日志记录库-logrus使用
介绍 logrus 它是一个结构化.插件化的日志记录库.完全兼容 golang 标准库中的日志模块.它还内置了 2 种日志输出格式 JSONFormatter 和 TextFormatter,来定义输 ...
- SpringBoot 整合 Mybatis-Plus + Mysql
mybatis-plus是mybatis的一款插件,它的主要作用是快速开发,省略mybatis的配置,具体的功能请参照官网. 开发环境: springboot,maven,mybatis-plus,m ...
- PTA7-2 愿天下有情人都是失散多年的兄妹
呵呵.大家都知道五服以内不得通婚,即两个人最近的共同祖先如果在五代以内(即本人.父母.祖父母.曾祖父母.高祖父母)则不可通婚.本题就请你帮助一对有情人判断一下,他们究竟是否可以成婚? 输入格式: 输入 ...
- Spark性能调优——9项基本原则
原则一:避免创建重复的RDD 通常来说,我们在开发一个Spark作业时,首先是基于某个数据源(比如Hive表或HDFS文件)创建一个初始的RDD:接着对这个RDD执行某个算子操作,然后得到下一个RDD ...
- Java 处理表格，真的很爽！
一个简单又快速的表格处理库 大家好,我是鱼皮. 处理 Excel 表格是开发中经常遇到的需求,比如表格合并.筛选表格中的某些行列.修改单元格数据等. 今天给大家分享一个 Java 处理表格的工具库,不 ...
- 既生瑜何生亮 access_token VS refresh_token
中国有句老话, 既生瑜何生亮, 既然有我周瑜在世, 为什么老天还要一个诸葛亮啊? 同样的, 众所周知, 在 OAuth 2.0 授权协议中, 也有两个令牌 token , 分别是 access_tok ...
- MySQL全面瓦解28：分库分表
1 为什么要分库分表 物理服务机的CPU.内存.存储设备.连接数等资源有限,某个时段大量连接同时执行操作,会导致数据库在处理上遇到性能瓶颈.为了解决这个问题,行业先驱门充分发扬了分而治之的思想,对大库 ...
- [Ocean Modelling for Begineers] Ch4. Long Waves in a Channel
Ch4. Long Waves in a Channel 简介 本章主要介绍明渠中分层流体模拟.练习包括浅水表面波,风暴潮.内波和分层流体模拟. 4.1 有限差分法详细介绍 4.1.1 泰勒公式 4. ...