jQuery对AJAX操作的封装

原创 2015年11月20日 00:00:33

jQuery对AJAX操作的封装

1.jQuery对AJAX操作的封装——load()
().load(url,[data],[fn])URL(text/html)innerHTML仿GoogleSuggestheader(ContentType:text/html);<script type="math/tex" id="MathJax-Element-154">(‘…’).load(url, [data], [fn]) 异步加载指定URL返回的数据(必需是text/html),挂载为当前选定元素的innerHTML 示例:仿写GoogleSuggest,搜索建议 服务器端: header(‘Content-Type: text/html’); 客户端: </script>(‘#suggest ul’).load(‘1.php?kw=xx’, fn);
load()函数的局限性:(1)服务器只能返回HTML片段 (2)此方法只能把返回结果加载为当前选定元素的innerHTML,已有内容全部会被清除 (3)响应成功时,才有效;失败的情况下,没有任何处理机制

2.jQuery对AJAX操作的封装——$.ajax()
使用方法:

$.ajax( {
type: 'GET/POST/PUT/DELETE',
url: 'xx.php',
data: 'k1=v1&k2=v2' | {k1:v1,  k2:v2},
dataType: 'text/html/script/xml/json/jsonp',
beforeSend: fn,
success: fn,
error: fn,
complete: fn
} )

在jQuery提供的所有AJAX函数中,提交的数据可以有两种形式:
(1)HTTP协议规定的标准格式: ‘k1=v1&k2=v2…’
(2)JS对象格式:{ k1: v1, k2:v2 } jQuery在发送此格式的数据之前会自动调用$.param()函数,将JS对象改为第一种格式
示例:分多次异步加载员工数据
服务器端:
header(‘Content-Type: application/json’);
客户端:

$.ajax({
type: 'GET',
url: '2.php',
dataType: 'json',
success: function(data){
}
});

3.jQuery对AJAX操作的封装——$.get()

.get().ajax()的一个简化版本。
用法:.get(url,[data],[sccessFn]).get(‘2.php’, function(data){
})

4.jQuery对AJAX操作的封装——$.post()

.post().ajax()的一个简化版本。
示例:实现表单数据的异步提交

$.post(
'4.php' , 
'k1=v1&k2=v2'/{k1:v1,k2:v2},## 标题 ##  
function(data){
}
)

提示:(1)若请求数据是对象格式,jQuery底层会自动将其转换为符合HTTP标准的数据格式(键值对形式) (2)$.post底层会自动修改Content-Type请求消息的头部为application/x-www-form-urlencoded

5.jQuery对AJAX操作的封装——.getJSON().getJSON()是.ajax()GETJSONJSON.parse()JSONJS.getJSON(‘xx.php’, data, fn)

6.jQuery对AJAX操作的封装——.getScript().getScript()是.ajax()GETJSeval().getJSON(‘xx.php/xx.js’)

7.补充话题:使用AJAX异步提交表单
(1)方式一:手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用.post(url,data,fn)(2)('#myform').serialize( ); 其返回值就是“k1=v1&k2=v2...”键值对形式,再使用$.post发起异步请求即可。
(3)方式三:使用jQuery Form插件提供的ajaxSubmit()函数,用法:

$('#myform').ajaxSubmit({
type: 'GET/POST',
url: 'xx.php',
dataType: 'json',
success: fn,
clearForm: true,
resetForm: true
});  //此函数会自动把选定的表单进行序列化并异步提交

jQuery对AJAX的封装——$.ajax

php new document jQuery对AJ
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年04月11日 23:02
  • 336

jquery Ajax 全局调用封装

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....})写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端...
  • xllily_11
  • xllily_11
  • 2016年06月02日 15:03
  • 16775

原生 ajax 封装

原生ajax 封装
  • ruiti
  • ruiti
  • 2017年02月10日 09:42
  • 283

Ajax 简单封装类库

  • 2007年09月14日 10:08
  • 8KB
  • 下载

对Jquery中的ajax再封装,简化操作

jQueryAjaxJson取值示例 $(function () { jsonAjax("AjaxQuery.aspx", "ty...
  • smartsmile2012
  • smartsmile2012
  • 2013年11月30日 16:30
  • 14360

基于jquery的ajax方法的二次封装

我并不是专业的前端开发攻城狮,所以,这篇文章的水平,可能是比较低的,里面一些观点,可能都比较可笑。如果有疏漏或错误的地方,希望大家能指出来。如果文章的价值不大,也希望大牛能指点一二,在此先谢谢了。  ...
  • u012491617
  • u012491617
  • 2017年01月02日 13:09
  • 1614

原生ajax的封装

请求步骤: 建立XMLHttpRequest连接 向后台服务器发送请求 根据服务器返回的状态码执行相关的操作 返回的数据格式化 function json2url(json) { json.t...
  • weixin_38969517
  • weixin_38969517
  • 2017年08月02日 22:01
  • 38

AJAX 封装

var $={ /*传递参数对象,返回拼接之后的字符串*/ /*{‘name’:’jack,’age’:20}=> name=jack&age=20&*/ getParmeter:functio...
  • weixin_38918876
  • weixin_38918876
  • 2017年07月24日 16:37
  • 27

对Jquery中的ajax再封装,简化操作

jQueryAjaxJson取值示例 $(function () { jsonAjax("AjaxQuery.aspx", "ty...
  • smartsmile2012
  • smartsmile2012
  • 2013年11月30日 16:30
  • 14360

jquery Ajax 全局调用封装

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....})写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端...
  • xllily_11
  • xllily_11
  • 2016年06月02日 15:03
  • 16775
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery对AJAX操作的封装
举报原因:
原因补充:

(最多只允许输入30个字)