AJAX之jQuery操作&&全局处理程序

最新推荐文章于 2023-01-06 10:31:03 发布
最新推荐文章于 2023-01-06 10:31:03 发布
阅读量562 收藏
点赞数
分类专栏： ajax 日报 文章标签： 手机归属地查询 天气预报查询
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peijiajing/article/details/103169442
版权
日报 同时被 2 个专栏收录
47 篇文章 0 订阅
订阅专栏
ajax
7 篇文章 0 订阅
订阅专栏

jQuery之AJAX

  • 日常开发里为了提高开发效率，一般会使用框架中的AJAX语法，例如经常使用的jQuery，也给我们封装好了AJAX的一些语法操作，而且jQuery也封装了JSONP跨域。
  • 几种常用的方式$.ajax，$.post， $.get， $.getJSON

jQuery之$.ajax

  • 1、$.ajax
    • $.ajax是JQuery对ajax封装的最基础，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。
  • 看一下常用的参数：
    • type—数据的提交方式：get和post
    • url—数据的提交路径
    • async—是否支持异步刷新，默认是true异步
    • data—参数值，需要提交的数据
    • dataType—服务器返回数据类型，例如xml,String,Json,jsonp等
    • beforeSend—请求前的回调函数、success—请求成功后的回调函数
    • error—请求失败后的回调函数、complete请求完成的回调函数(不论成功失败)
  • 2、$.post
    • $.post是对$.ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。$.post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。
    • 在满足这些情况下，可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，不可以改变。

jQuery之$.get与$.getJSON

  • 3、$.get
    • 和$.post一样，这个函数是对get方法的提交数据进行封装，只能使用在get提交数据解决异步刷新的方式上，使用方式和上边的也差不多。
  • 4、$.getJSON
    • 这个是进一步的封装，也就是对返回数据类型为Json进行操作。里边就三个参数，需要我们设置，非常简单：url,[data],[callback]

jQuery之$.ajax同源

  • 【前言】
  • 日常开发里，一般使用**$.ajax**即可实现所有操作，接下来结合案例讲解下
  • 接下来分别介绍下利用$.ajax实现同源和跨域请求
    • （1）$.ajax()方法实现同源数据请求
    • （2）$.ajax()方法实现跨域数据请求

jQuery之$.ajax同源

  • （1）$.ajax()方法实现同源数据请求
    在这里插入图片描述
  • （1）$.ajax()方法实现同源数据请求
    • 请求完毕后再对返回数据进行解析，然后更新至HTML模板即可实现局部更新页面
    • 接下来结合之前的JSONP跨域实现百度搜索关键字案例，这里利用jQuery的AJAX实现

jQuery之$.ajax跨域

  • （2）$.ajax()方法实现跨域数据请求
    • https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/
      在这里插入图片描述
  • 其他设置和之前一样，直接修改js部分即可，如下所示
    在这里插入图片描述
  • （2）$.ajax()方法实现跨域数据请求注意事项
    • 使用jQuery获取跨域数据
      1、dataType:“jsonp”
      2、jsonp默认值"callback"，可以自行修改

jQuery之$.ajax参数

常用参数：

  • 1、url
    • 类型：String
    • 默认值: 当前页地址。发送请求的地址。
  • 2、type
    • 类型：String
    • 默认值: “GET”。请求方式POST或GET， 默认为 GET。注意：其它 HTTP 请求方法，如 DELETE也可以使用，但仅部分浏览器支持。
  • 3、async
    • 类型：Boolean
    • 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
  • 注意：同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。这里需要注意就是如果后面需要使用方法请求成功的数据，必须要设为同步，否则将会出现意想不到的错误，这个往往在刚开始使用ajax都会犯这个错误需特别留意
  • 4、data
    • 类型：String
    • 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
  • 5、jsonp
    • 要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分
  • 6、dataType
    • 类型：String
    • 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。
  • 6、dataType可用值:
    • “xml”: 返回 XML 文档，可用 jQuery 处理。
    • “html”: 返回纯文本 HTML 信息；包含的 script 标签在插入 dom 时执行。
    • “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache”参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
    • “json”: 返回 JSON 数据 。
    • “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “callback=?” jQuery 将自动替换 ?
      为正确的函数名，以执行回调函数。
      在这里插入图片描述
    • “text”: 返回纯文本字符串
  • 7、success
    • 要求为Function类型的参数，请求成功后调用的回调函数
  • 8、error
    • 要求为Function类型的参数，请求失败时被调用的函数
  • 9、beforeSend
    • 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。
  • 10、complete
    • 要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
  • 11、jsonp
    • 请求自动带上callback参数，callback值为jsonpCallback的值
  • 12、jsonpCallback
    • JSONP回调函数callback的值

jQuery之AJAX案例

  • 案例一：天气查询
    • 功能：
      输入框输入城市后，点击查询按钮，调用天气API，会在下方显示出搜索城市的天气及未来几天的天气预报。
      在这里插入图片描述
  • 案例一：天气查询—【前言】
    • 聚合数据全国天气预报接口：https://www.juhe.cn/docs/api/id/39
      在这里插入图片描述
  • 点击链接注册并获取KEY密钥，选择天气预报接口，可以免费调用500次
  • 案例一：天气查询—逻辑梳理
    • 1、输入城市名
    • 2、点击的时候发送请求
    • 3、响应成功渲染页面
  • 案例1具体代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 600px;
			height: 440px;
			background: url(img/02.jpg);
			background-size: 100% 100%;
			margin: 100px auto;
		}

		.top {
			width: 100%;
			height: 60px;
			background: rgba(0, 0, 0, 0.6);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.top input {
			width: 400px;
			height: 40px;
			box-sizing: border-box;
			border: none;
			outline: none;
			background: rgba(0, 0, 0, 0.5);
			color: white;
			padding: 20px;
		}

		.top button {
			width: 80px;
			height: 40px;
			border: 2px solid rgba(250, 250, 250, 0.5);
			outline: none;
			color: white;
			background: rgba(0, 0, 0, 0.7);
		}

		.top button:active {
			color: red;
			border: 2px solid rgba(250, 250, 250, 0.8);
		}

		#bottom {
			width: 100%;
			height: 150px;
			background: rgba(250, 250, 250, 0.4);
			border-top: 1px solid #000000;
			padding: 20px;
			box-sizing: border-box;
		}

		.wei {
			width: 100%;
			height: 10px;
			background: rgba(250, 250, 250, 0.5);
			border-top: 1px solid #000000;
		}

		#forIn {
			width: 100%;
			height: 220px;
			background: rgba(250, 250, 250, 0.5);
			padding: 20px;
			box-sizing: border-box;
		}
	</style>
	<body>
		<div class="box">
			<div class="top">
				<input id="inp" type="text" placeholder="请输入要查询的城市" />
				<button type="button" id='btn'>查询</button>
			</div>
			<div id="bottom"></div>
			<div class="wei">未来七天天气：</div>
			<div id="forIn"></div>
		</div>
	</body>
	<script src="js/3..1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			$('#btn').on('click', function() {
				var inp = $("#inp").val() || "石家庄";
				$.ajax({
					type: 'get',
					url: 'http://v.juhe.cn/weather/index',
					data: {
						"format": 2,
						"cityname": inp,
						"key": '此处填写自己的密钥',
					},
					async: true,
					dataType: "jsonp",
					jsonp: "callback",
					/*请求自动带上callback参数，callback值为jsonpCallback的值*/
					jsonpCallback: 'callback_fn',
					success(data) {
						if (data.resultcode == 200) {
							var sk = data.result.sk;
							var today = data.result.today;
							var futur = data.result.future;
							var info = "";
							info += "<p>";
							info += "<b>" + "当前城市:" + "</b>" + today.city + "&nbsp" + "&nbsp" +
								today.date_y + "&nbsp" + "&nbsp" +
								"<b>" + "当前:" + "</b>" + sk.temp + "℃ ," + "&nbsp" + "&nbsp" +
								sk.wind_direction + "," + "&nbsp" + "&nbsp" +
								sk.wind_strength + "<br/>" +
								"<b>" + "当前湿度：" + "</b>" + sk.humidity + "&nbsp" + "&nbsp" +
								"<b>" + "当前时间：" + "</b>" + sk.time + "&nbsp" + "&nbsp" +
								"<b>" + "今天温度：" + "</b>" + today.temperature + "<br/>" +
								today.weather + "&nbsp" + "&nbsp" +
								today.week + "&nbsp" + "&nbsp" +
								today.dressing_index + "<br/>" +
								today.dressing_advice;
							info += "</p>"
							$("#bottom").html(info)
							var info1 = "";
							for (var i = 0; i < futur.length; i++) {
								info1 += "<p>";
								info1 += futur[i].week + "&nbsp" + "&nbsp" + "&nbsp" + "&nbsp" +
									futur[i].date + "&nbsp" + "&nbsp" + "&nbsp" + "&nbsp" +
									futur[i].temperature + "&nbsp" + "&nbsp" + "&nbsp" + "&nbsp" +
									futur[i].wind + "&nbsp" + "&nbsp" + "&nbsp" + "&nbsp" +
									futur[i].weather
								info1 += "</p>"
								console.log(futur[i])
								$("#forIn").html(info1)
							}
							$("#inp").val("")
						} else {
							alert(data.reason)
						}
					},
					error() {
						alert('error')
					}
				})
			})

		})
	</script>
</html>

  • 接下来对上述做下完善修改，如下所示

    • 1、将url中的参数放到data选项里，参数如下
      在这里插入图片描述

  • 2、添加jsonp和jsonpCallback选项

  • 再来一个手机号归属地案例

    • 具体代码如下：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/3..1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 300px;
				height: 340px;
				border: 1px solid red;
				margin: 100px auto;
			}

			.top {
				width: 100%;
				height: 40px;
				border: 1px solid red;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.top input {
				width: 200px;
				height: 30px;
				padding-left: 10px;
			}

			.top button {
				width: 40px;
				height: 30px;
			}

			.bottom {
				width: 300px;
				height: 300px;
				border: 1px solid red;
				padding: 56px;
				box-sizing: border-box;
				position: relative;
			}

			#loadingImg {
				display: none;
				width: 100px;
				height: 100px;
				position: absolute;
				margin: auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="top">
				<input type="tel" placeholder="请输入要查询的手机号" />
				<button id="searchBtn">查询</button>
			</div>
			<div class="bottom">
				<img src='img/5-121204194032-51.gif' id="loadingImg" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function callbackFn(option) {
			console.log('自定义成功')
			console.log(option)
		}
		$(function() {
			$(document).ajaxStart(function(event, request, settings) {
				$(".bottom").html('<img src="img/5-121204194032-51.gif" id="loadingImg" style="display:block;">');
			});
			$(document).ajaxSuccess(function(event, request, settings) {
				$("#loadingImg").css("display", "none");
			});
			$("#searchBtn").click(function() {
				var tel = $('input[type="tel"]').val();
				$.ajax({
					url: "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
					type: 'get',
					data: {
						'tel': tel
					},
					async: true,
					dataType: 'jsonp',
					jsonpCallback: 'callbackFn',
					success: function(res) {
						console.log('成功')
						console.log(res)
						let showHtml = "";
						showHtml += "<h4>手机号：" + res.telString + "</h4>";
						showHtml += "<h4>一级归属：" + res.catName + "</h4>";
						showHtml += "<h4>二级归属：" + res.carrier + "</h4>";
						showHtml += "<h4>归属地：" + res.province + "</h4>";
						$(".bottom").html(showHtml);
					},
					error: function(err) {
						console.log(err)
					}
				});
				tel = $('input[type="tel"]').val("")
			})
			var input = document.getElementsByTagName("input")[0];
			var zz = /^1(3|4|5|7|8)\d{9}$/;
			input.onblur = function() {
				if (zz.test(input.value)) {

				} else {
					alert("请输入正确的手机号")
					tel = $('input[type="tel"]').val("")

				}
			};

		})
	</script>
</html>

全局事件处理程序

  • 这里补充介绍下全局Ajax事件处理程序
    在这里插入图片描述
  • 这里补充介绍下全局Ajax事件处理程序
    在这里插入图片描述
  • 详情参见jquery的AJAX官方API文档
    • 链接：https://api.jquery.com/category/ajax/global-ajax-event-handlers/

完毕.有问题留言小编…

裴嘉靖
关注
专栏目录
jQuery动画和AJAX基础知识
锦鲤姑娘的博客
03-07 2万+
jQuery动画以及ajax基础知识及代码举例
jQuery之Ajax--全局Ajax事件处理器
weixin_30687811的博客
12-29 107
1.这些方法用于注册事件处理器，用来处理页面上的任何 Ajax 请求，当某些事件触发后，这些事件处理器被调用。如果jQuery.ajaxSteup()中的 global 属性被设置为 true （这也是默认设置），那么，每个 Ajax 请求都会触发全局事件。注意：全局事件绝对不会被跨域（cross-domain）脚本或 JSONP 请求触发，和 global 属性的设置毫无关系。 2.　　.aj...
jquery:ajax的全局事件
胡世林的博客
08-05 1163
资料来源：http://www.css88.com/jqapi-1.9/category/ajax/ 只选用了几个作为例子： $.ajax：发送一个ajax请求，需要在内部定义type（请求的方式） $.ajaxSetup：设置ajax的默认请求参数 $(document).ajaxComplete：当有ajax请求完成的时候 $(document).ajaxError：当有ajax请求...
59 jQuery-使用全局函数getJSON（）实现异步获取数据
LiGuogang
01-04 228
1.效果图 2.HTML代码 2.1 jquery_getJSON.html页面代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;58 jQuery-使用全局函数get
Jquery 使用全局变量ajax请求返回的json问题
asartear的专栏
11-17 2015
我们先来看段代码：function loadTreedata(){ var _menuData=[]; $.ajax({ type:"post", dataType:"json", accept:"application/json", url:"/ThrLia/queryFunTree.action", error:function(data) { alert("加载失败"
AJAX之jQuery操作
zuomengjia的博客
11-20 670
jQuery之AJAX 日常开发里为了提高开发效率，一般会使用框架中的AJAX语法，例如经常使用的jQuery，也给我们封装好了AJAX的一些语法操作，而且jQuery也封装了JSONP跨域。 几种常用的方式.ajax，.ajax，.ajax，.post， $.get， $.getJSON ...
jQuery ajax全局函数处理session过期后的ajax跳转问题
10-22
jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript编程，尤其是对于HTML文档遍历和操作、事件处理、动画和Ajax交互。Ajax即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新...
封装了jQuery的Ajax请求全局配置
12-12
下面是在项目中封装了jQuery的Ajax，分享给大家。 代码： 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {  var url = opt.url;  var href = location.href;  // 判断是否跨域请求  var ...
jquery 全局AJAX事件使用代码
10-28
在Web开发中，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理以及包括AJAX（异步JavaScript和XML）在内的数据通信。全局AJAX事件是jQuery提供的一种机制，允许开发者监听并响应所有页面上发生的...
html5页面开发源代码（含ajax封装及调用方法）
07-26
提供完整的html5页面开发流程和开发方式，包括html5页面开发代码，含ajax封装方法，以及调用的方式
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
10-22
以上内容详细介绍了jQuery中Ajax全局事件的引用方式和各个事件的执行顺序，希望对想要在Web开发中使用jQuery处理Ajax请求的开发者有所启发和帮助。通过合理利用这些事件，可以使网页的用户体验更加流畅和友好。
Flv解复用代码解析
努力努力再努力L
03-17 3万+
FLV解复用-FlvParser源码阅读 目录 总体流程 main函数 处理函数process 解析函数 FLV相关数据结构 CFlvParser表示FLV解析器 FlvHeader表示FLV的头部 标签 标签头部 标签数据 script类型的标签 音频标签 视频标签 解析FLV头部 入口函数 FLV头部解析函数 解析头部标签 标签的解析过程 解析标签头部的函数 解析视频标签 入口函数CreateTag 创建视频标签 解析视频标签 解析视频配置信息 解析视频数据 自定义
ios和安卓测试包发布网站http://fir.im的注册与常用功能
热门推荐
jia12216的专栏
05-06 6万+
作为专业的ios和安卓测试包发布网站，注册超简单。支持输入网址直接下载和二维码扫描下载。功能类似TestFlight ,但又比它强大，支持游客访问密码，ios和安卓测试app都支持。模仿TestFlight ，又高于TestFlight 。
[适合非python新手]selenium自动化测试 25-测试用例运行和报告
wltsysterm的博客
08-13 2万+
目录 背景 测试用例运行 HTMLTestRunner-测试报告生成 verbosity 添加用例注释，增加报告完整性 完整demo代码 HTMLTestRunner源码 背景 上一篇已经讲解了测试用例的编写。这一篇讲解下测试用例如何运行以及如何生成测试报告。 测试用例运行 测试用例的运行，其实就是把每个方法抽取出来作为普通的函数运行即可。有python底子的同学，都知道这一步怎么做。 HTMLTestRunner-测试报告生成 既然叫做自动化测试了，那么测试结果肯定要输出，因
使用管理员账户远程连接WMQ7.5的“AMQ4036”错误
诚的博客
04-21 1万+
解决方法如下: 例如队列管理器名字叫做QM.SWITCH，你通过WAS控制台连接MQ的连接通道名字叫做"SYSTEM.ADMIN.SVRCONN"，用mqm用户（或者root用户连接到MQ服务器上）操作内容如下： runmqsc QM.SWITCH ALTER CHL(SYSTEM.ADMIN.SVRCONN) CHLTYPE(SVRCONN) MCAUSER('mqm') ...
awesome PyQt5 的奇技淫巧
最新发布
MusicMan
01-06 4568
来自PyQt5的奇技淫巧
.NET中使用Jquery和Ajax（二）
123
08-21 9516
接着上一篇的来讲，现在已经初步学会了在HTML页面中调用这些方法来弹出想要的弹窗。 中间有些关于Ajax的get，post方法在这里就不具体提到了，现在主要讲的是通过Ajax来提交数据，并通过我们之前使用的插件。 首先在页面中插入几个HTML控件，包括输入框 和提交按钮，比如：
pythonUI自动化-02-unittest框架
m0_58250910的博客
10-30 3万+
ui
jQuery全局Ajax事件详解
在jQuery中，有多个全局Ajax事件，这些事件使得开发者可以在Ajax请求的生命周期的不同阶段进行相应的处理。 1. `ajaxStart(callback)`：当任何Ajax请求开始时，这个事件会被触发。如果你注册了一个回调函数，它将在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

裴嘉靖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值