基于jQuery中ajax的相关方法汇总(必看篇)


Posted in jQuery onNovember 08, 2017

前提条件

话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦。

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

具体方法

①load()

使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:

load(url,[data],[callback])

参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

例如,点击“加载”按钮时,向服务器请求加载一个指定页面的内容,加载成功后,将数据内容显示在<div>元素中,并将加载按钮变为不可用。如下图所示:

基于jQuery中ajax的相关方法汇总(必看篇)

②使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为:

jQuery.getJSON(url,[data],[callback])$.getJSON(url,[data],[callback])

其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

例如,点击页面中的“加载”按钮,调用getJSON()方法获取服务器中JSON格式文件中的数据,并遍历数据,将指定的字段名内容显示在页面中。如下图所示:

基于jQuery中ajax的相关方法汇总(必看篇)

③使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示:

jQuery.getScript(url,[callback])$.getScript(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

例如,点击“加载”按钮,调用getScript()加载并执行服务器中指定名称的JavaScript格式的文件,并在页面中显示加载后的数据内容,如下图所示:

在浏览器中显示的效果:

基于jQuery中ajax的相关方法汇总(必看篇)

④使用get()方法以GET方式从服务器获取数据

 使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:

$.get(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

例如,当点击“加载”按钮时,调用get()方法向服务器中的一个.php文件以GET方式请求数据,并将返回的数据内容显示在页面中,如下图所示:

基于jQuery中ajax的相关方法汇总(必看篇)
⑤使用post()方法以POST方式从服务器发送数据

get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:

$.post(url,[data],[callback])

参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。

例如,在输入框中录入一个数字,点击“检测”按钮,调用post()方法向服务器以POST方式发送请求,检测输入值的奇偶性,并显示在页面中,如下图所示:

基于jQuery中ajax的相关方法汇总(必看篇)

⑥使用serialize()方法序列化表单元素值

使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:

$(selector).serialize()

其中selector参数是一个或多个表单中的元素或表单元素本身。

例如,在表单中添加多个元素,点击“序列化”按钮后,调用serialize()方法,将表单元素序列化后的标准URL编码文本字符串显示在页面中,如下图所示:

基于jQuery中ajax的相关方法汇总(必看篇)

在浏览器中的显示效果:

基于jQuery中ajax的相关方法汇总(必看篇)

⑦使用ajax()方法加载服务器数据

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:

jQuery.ajax([settings])$.ajax([settings])

其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。

例如,点击页面中的“加载”按钮,调用ajax()方法向服务器请求加载一个txt文件,并将返回的文件中的内容显示在页面,如下图所示:

基于jQuery中ajax的相关方法汇总(必看篇)

⑧使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:

jQuery.ajaxSetup([options])$.ajaxSetup([options])

可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。

例如,先调用ajaxSetup()方法设置全局的Ajax选项值,再点击两个按钮,分别使用ajax()方法请求不同的服务器数据,并将数据内容显示在页面,如下图所示:

基于jQuery中ajax的相关方法汇总(必看篇)

⑨使用ajaxStart()和ajaxStop()方法

ajaxStart()ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为:

$(selector).ajaxStart(function())$(selector).ajaxStop(function())

其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。

例如,在调用ajax()方法请求服务器数据前,使用动画显示正在加载中,当请求成功后,该动画自动隐藏,如下图所示:

基于jQuery中ajax的相关方法汇总(必看篇)

在浏览器中的结果:

基于jQuery中ajax的相关方法汇总(必看篇)

从图中可以看出,由于使用ajaxStart()ajaxStop()方法绑定了动画元素,因此,在开始发送Ajax请求时,元素显示,请求完成时,动画元素自动隐藏。

以上这篇基于jQuery中ajax的相关方法汇总(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中each循环的简单回滚操作
May 05 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jquery实现轮播图特效
Apr 12 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 #jQuery
jQuery ajax读取本地json文件的实例
Oct 31 #jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 #jQuery
Vue中正确使用jQuery的方法
Oct 30 #jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 #jQuery
You might like
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php编程每天必学之验证码
2016/03/03 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
理解javascript异步编程
2016/01/27 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
Python实现端口检测的方法
2018/07/24 Python
Python实现基于POS算法的区块链
2018/08/07 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
新闻专业个人求职信
2013/12/19 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
税务干部鉴定材料
2014/02/11 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
三严三实学习心得体会
2014/10/13 职场文书
违章停车检讨书
2014/10/21 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL