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( ...
随机推荐
- Git 图形化客户端--Sourcetree
1.图形化客户端: sourcetre下载:https://www.sourcetreeapp.com/ 2.接着并执行SourceTreeSetup-3.1.3.exe,会进入登录或注册bitbuc ...
- 快速排序--洛谷卡TLE后最终我还是选择了三向切割
写在前边 这篇文章呢,我们接着聊一下排序算法,我们之前已经谈到了简单插入排序 和ta的优化版希尔排序,这节我们要接触一个更"高级"的算法了--快速排序. 在做洛谷的时候,遇到了一道 ...
- 组件通信之全局事件总线 & 消息订阅发布
全局事件总线 介绍 一种组件间通信的方式,适用于任意组件间通信. 在使用全局事件总线之前需要一些知识准备 所有组件实例的原型对象的原型对象就是 Vue 的原型对象,即VueComponent.prot ...
- yaml基本用法
简介 YAML 是 "YAML Ain't Markup Language"(YAML 不是一种标记语言)的递归缩写.在开发的这种语言时,YAML 的意思其实是:"Yet ...
- 简单的SQl时间序列生成，每次时间间隔10分钟。
create table #timeseries(Times datetime not null) go declare @firstdate datetime , @lastdate datetim ...
- 『学了就忘』Linux软件包管理 — 40、Linux系统软件包介绍
目录 1.Linux系统软件包分类 2.源码包说明 3.二进制包说明 4.RPM包的优缺点 4.RPM包的两种安装方法 5.总结 1.Linux系统软件包分类 Linux系统下的软件包只有源码包和二进 ...
- 记一次 IIS 站点配置文件备份和还原，物理路径文件批量备份
前言 上一篇文章实现了数据库的批量备份和还原,当然部署在服务器中的IIS站点备份也是一个十分繁琐的事,三四个数量不多的还好,像有一些服务器用了许久,承载几十个站点甚至更多,一个一个备份,再一个一个还原 ...
- CSDN code使用
常见错误:在linux下拷贝的时候有时候会出现cp:omitting directory的错误 ,例如 cp:omitting directory "bbs" 说明bbs目录下面还 ...
- 如何在C#中使用Google.Protobuf工具
protobuf是一个语言无关.平台无关的序列化协议,由谷歌开源提供.再加上其高性能.存储占用更小等特点,在云原生的应用中越来越广泛. 在C#中主要有两种方法来使用protobuf协议,nuget包分 ...
- Java LinkedList小记
1. 基本用法 LinkedList实现了List.Deque.Queue接口,可以按照队列.栈和双端队列的方式进行操作.LinkedList有两个构造方法,一个是默认构造,另一个接受Collecti ...