基于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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
深入理解Python中的*重复运算符
2017/10/28 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
创先争优公开承诺书
2014/08/30 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
英文道歉信
2015/01/20 职场文书
客房服务员岗位职责
2015/02/09 职场文书
旅行社计调工作总结
2015/08/12 职场文书
学生会主席任命书
2015/09/21 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA