【SpringMVC笔记】Ajax 入门（jQuery.ajax）
2024-05-09 15:27:08
Ajax
- Ajax 简介
- 伪造 Ajax（iframe标签）
- jQuery.ajax
- 使用 jQuery.ajax 案例
- Ajax 执行流程
- Ajax 异步加载数据案例
- Ajax 验证用户名密码
- 获取 百度 接口案例
Ajax 简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- Ajax 不是新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
- 传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
- 使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
伪造 Ajax（iframe标签）
我们可以使用前端的 <iframe> 标签来伪造一个ajax的样子。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Ajax</title><script type="text/javascript">function go() {var url = document.getElementById("url").value;document.getElementById("iframePosition").src=url;}</script>
</head>
<body><div><p>请输入要加载的网址:<span id="currentTime"></span> </p><p><input id="url" type="text" value="https://www.baidu.com/"><input type="button" value="提交" onclick="go()"></p>
</div><div><h3>加载页面位置:</h3><iframe id="iframePosition"style="width: 70%" height="500px"></iframe>
</div></body>
</html>
利用AJAX可以做：
- 注册时，输入用户名自动检测用户是否已经存在。
- 登陆时，提示用户名密码错误
- 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除
- …等等
jQuery.ajax
有兴趣可以了解 JS原生 XMLHttpRequest，我们直接学习 JQuery 提供的 Ajax。
Ajax 的核心是 XMLHttpRequest 对象 (XHR)，
- XHR 为向服务器发送请求和解析服务器响应提供了接口，能够以异步方式从服务器获取新数据。
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON，同时能够把这些外部数据直接载入网页的被选元素中。
jQuery Ajax 本质就是 XMLHttpRequest，对他进行了封装，方便调用。
jQuery.ajax(...)部分参数：url：请求地址type：请求方式，GET、POST（1.9.0之后用method）headers：请求头data：要发送的数据contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")async：是否异步timeout：设置请求超时时间（毫秒）beforeSend：发送请求前执行的函数(全局)complete：完成之后执行的回调函数(全局)success：成功之后执行的回调函数(全局)error：失败之后执行的回调函数(全局)accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型dataType：将服务器端返回的数据转换成指定类型"xml": 将服务器端返回的内容转换成xml格式"text": 将服务器端返回的内容转换成普通文本格式"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式"json": 将服务器端返回的内容转换成相应的JavaScript对象"jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
使用 jQuery.ajax 案例
常规配置 web.xml 和 applicationContext.xml：
web.xml：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>/</url-pattern></servlet-mapping><filter><filter-name>encoding</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class></filter><filter-mapping><filter-name>encoding</filter-name><url-pattern>/*</url-pattern></filter-mapping></web-app>
applicationContext.xml：记得加 静态资源过滤 和 注解驱动配置。
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttps://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"><!-- 自动扫描包，让指定包下的注解生效,由IOC容器统一管理 --><context:component-scan base-package="com.yusael.controller"/><!--静态资源过滤--><mvc:default-servlet-handler/><!--注解驱动配置--><mvc:annotation-driven/><!-- 视图解析器 --><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"id="internalResourceViewResolver"><!-- 前缀 --><property name="prefix" value="/WEB-INF/jsp/" /><!-- 后缀 --><property name="suffix" value=".jsp" /></bean></beans>
编写一个 AjaxController：
@RestController
public class AjaxController {@RequestMapping("/ajax1")public void ajax1(String name, HttpServletResponse response) throws IOException {if ("admin".equals(name)) {response.getWriter().write("true");} else {response.getWriter().write("false");}}
}
编写 index.jsp 测试：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>Ajax测试</title><script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script><script>function a1() {$.ajax({url : "${pageContext.request.contextPath}/ajax1",data : {'name' : $("#username").val()},success : function(data, status) {alert(data);alert(status);},error : function () {}});}</script></head><body><%--onblur：失去焦点触发事件--%>用户名: <input type="text" id="username" onblur="a1()"></body>
</html>
Ajax 执行流程
Ajax 异步加载数据案例
首先写一个实体类 User：
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {private String name;private int age;private String sex;
}
在 Controller 中获取一个集合对象，展示到前端页面：
@RequestMapping("/ajax2")
public List<User> ajax2() {List<User> list = new ArrayList<>();list.add(new User("zhenyu", 21, "男"));list.add(new User("yusael", 99, "男"));list.add(new User("hahaha", 18, "女"));return list; // 由于@RestController注解, 将list转成json格式返回
}
前端页面：ajaxtest.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head><meta charset="UTF-8"><title>Ajax测试</title>
</head>
<body><input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center"><tr><td>姓名</td><td>年龄</td><td>性别</td></tr><tbody id="content"></tbody>
</table><script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
<script>$(function () {$("#btn").click(function () {$.post("${pageContext.request.contextPath}/ajax2", function (data) {console.log(data);var html = "";for (let i = 0; i < data.length; i++) {html += "<tr>" +"<td>" + data[i].name + "</td>" +"<td>" + data[i].age + "</td>" +"<td>" + data[i].sex + "</td>" +"</tr>"}$("#content").html(html);});})})</script></body>
</html>
Ajax 验证用户名密码
思考一下：我们平时登录时，输入框后面的实时提示是怎么做到的？
Controller：
@RequestMapping("/ajax3")
public String ahax3(String name, String pwd) {String msg = "";if (name != null) {if ("admin".equals(name)) {msg = "OK";} else {msg = "用户名有误!";}}if (pwd != null) {if ("123456".equals(pwd)) {msg = "OK";} else {msg = "密码输入有误!";}}return msg;
}
前端页面 login.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Login</title><script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script><script>function a1() {$.post({url : "${pageContext.request.contextPath}/ajax3",data : {'name' : $("#name").val()},success : function (data) {if (data.toString() === 'OK') {$("#userInfo").css("color", "green");} else {$("#userInfo").css("color", "red");}$("#userInfo").html(data);}});}function a2() {$.post("${pageContext.request.contextPath}/ajax3", {'pwd' : $("#pwd").val()}, function (data) {if (data.toString() === "OK") {$("#pwdInfo").css("color", "green");} else {$("#pwdInfo").css("color", "red");}$("#pwdInfo").html(data);});}</script>
</head>
<body><p>用户名: <input type="text" id="name" onblur="a1()"/><span id="userInfo"></span>
</p>
<p>密码: <input type="text" id="pwd" onblur="a2()"><span id="pwdInfo"></span>
</p>
</body>
</html>
注：记得处理 JSON 乱码！
applicationContext.xml 中加入以下代码：
<!--JSON乱码问题配置-->
<mvc:annotation-driven><mvc:message-converters register-defaults="true"><bean class="org.springframework.http.converter.StringHttpMessageConverter"><constructor-arg value="UTF-8"/></bean><bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"><property name="objectMapper"><bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean"><property name="failOnEmptyBeans" value="false"/></bean></property></bean></mvc:message-converters>
</mvc:annotation-driven>
获取 百度 接口案例
<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JSONP百度搜索</title><style>#q{width: 500px;height: 30px;border:1px solid #ddd;line-height: 30px;display: block;margin: 0 auto;padding: 0 10px;font-size: 14px;}#ul{width: 520px;list-style: none;margin: 0 auto;padding: 0;border:1px solid #ddd;margin-top: -1px;display: none;}#ul li{line-height: 30px;padding: 0 10px;}#ul li:hover{background-color: #f60;color: #fff;}</style><script>// 2.步骤二// 定义demo函数 (分析接口、数据)function demo(data){var Ul = document.getElementById('ul');var html = '';// 如果搜索数据存在 把内容添加进去if (data.s.length) {// 隐藏掉的ul显示出来Ul.style.display = 'block';// 搜索到的数据循环追加到li里for(var i = 0;i<data.s.length;i++){html += '<li>'+data.s[i]+'</li>';}// 循环的li写入ulUl.innerHTML = html;}}// 1.步骤一window.onload = function(){// 获取输入框和ulvar Q = document.getElementById('q');var Ul = document.getElementById('ul');// 事件鼠标抬起时候Q.onkeyup = function(){// 如果输入框不等于空if (this.value != '') {// ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆// 创建标签var script = document.createElement('script');//给定要跨域的地址 赋值给src//这里是要请求的跨域的地址 我写的是百度搜索的跨域地址script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo';// 将组合好的带src的script标签追加到body里document.body.appendChild(script);}}}</script>
</head><body>
<input type="text" id="q" />
<ul id="ul"></ul>
</body>
</html>
【SpringMVC笔记】Ajax 入门（jQuery.ajax）相关推荐
- $.ajax data怎么处理_不会吧，不会吧，不愧是Ajax，jQuery Ajax啊
Ajax and jQuery Ajax 我们做前端的,肯定不会只满足于写一些静态网页,我们希望做到网站(与服务器)的数据交互.不得不说,现在前端的发展真是太快了,不断的更新迭代,新的技术就如同雨后春 ...
- AJAX(三)jQuery AJAX.post
在jQuery 中也提供了一个比较简单的ajax请求jQuery.post(url, [data], [callback], [type]),如果考虑出错时执行函数该方法不适合,请选择ajax 相对j ...
- JS Ajax 和 jQuery Ajax ： 异步自动填充
第四十八章 JS Ajax 和 jQuery Ajax : 异步自动填充 48.1 案例介绍 48.2 案例相关技术 48.2.1 JSON数据 48.2.2 JSON-LIB工具 48.3 案例分析 ...
- asmx 接受 ajax post,jQuery ajax调用web服务（asmx）触发认证弹出框
在我的asp.net 4.0电子商务web应用程序中,登录的客户可以点击锚点,如"过去6个月内的订单"或"订单去年"来查看他过去的订单.当点击这样的锚,我做一个 ...
- jquery ajax node,jquery ajax post json and node express
在开发中,我们需要通过ajax向node服务端发送数据,而JavaScript天然对json的解析极其友好,所以我们一般都是通过ajax向服务端发送一个对象,直接在服务端使用点操作获取对象内容. fr ...
- php jquery ajax登录,jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍 ...
- 文本框输入即时Ajax搜索,JQuery+AJAX实现搜索文本框的输入提示功能
平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...
- php jquery ajax xml,jquery Ajax解析XML数据代码实例
jquery Ajax解析XML数据(同步及异步调用)简单实例 $.ajax({ async: true, // 默认true(异步请求) cache: true, // 默认true,设置为 fal ...
- jq ajax xml,jQuery+ajax读取并解析XML文件的方法
本文实例讲述了jQuery+ajax读取并解析XML文件的方法.分享给大家供大家参考,具体如下: ajax.xml: zhangsan 1 lisi 2 demo.html: /p> " ...
- json ajax查询,jQuery AJAX和JSON性能查询
我将一些JSON数据存储在文本文件中,以便在我的页面中使用jQuery Ajax进行查询.目前,我的文本文件包含大约10个数据面(可能包含额外的30个数据面). JSON数据包含这些问题的问题和答案. ...
最新文章
- r语言用行名称提取数据框信息显示na_用R语言提取数据框中日期对应年份（列表转矩阵）...
- Active Directory还原工具之三Software Active Directory Recycle Bin PowerPack
- Node学习9-gulp
- netapp 2个控制器spare盘分配
- el-button在表格操作行可以写成type=text'形式，这样有链接手型。
- 敏捷开发的45个好习惯
- 页面浏览事件之 $AppViewScreen 全埋点
- UML实践---用例图、顺序图、状态图、类图、包图、协作图
- FFmpeg源代码：avcodec_send_packet
- SUSE Linux 维护笔记二
- View,SurfaceView,SurfaceHolder
- centos7 mysql启动失败_Mysql主从复制
- Apache RocketMQ 分享
- 小汤学编程之JavaEE学习day07——版本控制工具：SVN、GIT
- css里calculate,css3 calc会计算的属性
- 客户端序列码生成_Django REST Framework教程(2): 序列化器介绍及开发基于函数视图的API...
- android微信支付代码,详解android微信支付实例代码
- 打破硬件边界，华为EMUI分布式技术如何连接万物
- 利用钩子技术控制进程创建(附源代码)
- numpy-np.random.choice