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( ...
随机推荐
- js--数组的 Array.of() 和 Array.from() 方法的使用总结
前言 JavaScript 中数组的本质是一个对象,它存在的 length 属性值随数组元素的长度变化,但是开发中经常会遇到拥有 length 属性和若干索引属性的对象,被称为类数组对象,类数组对象和 ...
- 12组-Alpha冲刺-2/6
一.基本情况 队名:字节不跳动 组长博客:https://www.cnblogs.com/147258369k/p/15535639.html 小组人数:10人 二.冲刺概况汇报 侯钦凯 过去两天完成 ...
- SpringCloud 2020.0.4 系列之 Stream 消息出错重试 与 死信队列 的实现
1. 概述 老话说的好:出错不怕,怕的是出了错,却不去改正.如果屡次出错,无法改对,就先记下了,然后找援军解决. 言归正传,今天来聊一下 Stream 组件的 出错重试 和 死信队列. RabbitM ...
- 网络安全协议之IPsec
声明 本文仅发表在博客园,作者LightningStar. 简介[1] IPSec(Internet 协议安全)是一个工业标准网络安全协议,工作在OSI模型的第三层,即网络层,为IP网络通信提供透明的 ...
- key按键使用
1. 按键实验 查询原理图可知KEY对应的按键和引脚,当KEY按下时,引脚为低电平,否则为高电平 2. 代码 2.1 GPIO 为了方便GPIO的编写,建立GPIO的文件夹和对应的.h和.c文件. b ...
- PIC18 bootloader之UART bootloader
了解更多关于bootloader 的C语言实现,请加我Q扣: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 应客户要求, 将PIC ...
- [NOIP2017 提高组] 宝藏
考虑到这种对于某种操作顺序有一个权值. 且这个权值有一个\(O(n)\)或者更好的复杂度求出. 求最值. 那可以用模拟退火. #include<iostream> #include< ...
- 洛谷 P7451 - [THUSCH2017] 杜老师（线性基+根分+结论题）
题面传送门 看到乘积为平方数我们可以很自然地想到这道题,具体来说,我们对 \(1\sim 10^7\) 中所有质因子标号 \(1,2,\cdots,\pi(10^7)\),对于 \(x\in[l,r] ...
- 【2020五校联考NOIP #6】最佳观影
题意: 给出一个 \(k \times k\) 的网格和 \(n\) 次操作.其中 \(k\) 为奇数. 每次操作给出一个数 \(m\).每次你要找出一个三元组 \((x,l,r)\) 使得: \(r ...
- 洛谷 P5527 - [Ynoi2012] NOIP2016 人生巅峰（抽屉原理+bitset 优化背包）
洛谷题面传送门 一道挺有意思的题,想到了某一步就很简单,想不到就很毒瘤( 首先看到这样的设问我们显然可以想到背包,具体来说题目等价于对于每个满足 \(i\in[l,r]\) 的 \(a_i\) 赋上一 ...