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( ...
随机推荐
- vue脚手架项目如何在控制台打印组件实例
需要在浏览器上安装拓展程序vue开发工具,安装好后在控制台上输入$vm即可打印vue组件实例对象. Vue2.3开发工具都有,可自行下载 百度网盘链接提取码:si5l
- django的增删改查
前置条件: 已有一个model (tbl_user) ,用户表 1.查询 # 查询用户表 username是cx的数据 user_object = tbl_user.objects.filter(us ...
- 菜鸡的Java笔记 第三十五 接口定义增强
接口定义增强 在java从一开始到现在接口之中的核心组成部分:抽象方法与全局常量,但是随着技术的不断发展,用户在使用过程之中发现了有一些问题 如果说现在有一个接口经过了长年 ...
- PHP高级特性-反射Reflection以及Factory工厂设计模式的结合使用[代码实例]
PHP高级特性-反射以及工厂设计模式的结合使用 [结合 Laravel-Admin 代码实例讲解] 利用反射来实现工厂模式的生产而无需创建特定的工厂类 本文地址http://janrs.com/?p= ...
- python实现图像梯度
一,定义与作用 图像梯度作用:获取图像边缘信息 二,Sobel 算子与函数的使用 (1)Sobel 算子------来计算变化率 (2)Sobel函数的使用 (3-1)代码实现(分别): (3-2)代 ...
- shuffle.java
/************************************************************************* * Compilation: javac Shuf ...
- 一文了解Docker基本概念
一.何为Docker Docker 是一个用于开发.交付和运行应用程序的开放平台,Docker 使您能够将应用程序与基础环境分开,以便您可以快速交付软件.借用百度百科的话来说,Docker 是一个开源 ...
- [cf566C]Logistical Questions
记$d(x,y)$为$x$到$y$的距离,$cost_{x}=\sum_{i=1}^{n}w_{i}d(x,i)^{\frac{3}{2}}$为$x$的代价 取$C$为足够大量,对于一条边权为$w$的 ...
- Jenkins快速上手安装
目录 环境准备 - JDK 安装 1. APT 安装 2. WAR包方式运行 3.Docker 方式运行 Jenkins 是一个独立的开源自动化服务器,可以用来自动化与构建.测试.交付或部署软件相关的 ...
- 7.5 实现基于探针对pod中的访问的健康状态检查
1.pod的声明周期 取值 描述 Pending Pod 已被 Kubernetes 系统接受,但有一个或者多个容器尚未创建亦未运行.此阶段包括等待 Pod 被调度的时间和通过网络下载镜像的时间, R ...