Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的使用方法总结
$.get(),$.post(),$.ajax(),$.getJSON()
一 $.get(url,[data],[callback])
说明:url为请求地址。data为请求数据的列表。callback为请求成功后的回调函数。该函数接受两个參数。第一个为server返回的数据,第二个參数为server的状态,是可选參数。
而当中,server返回数据的格式事实上是字符串形势,并非我们想要的json数据格式。在此引用仅仅是为了对照说明
$.get("/article/details/51073516",$("#firstName.val()"),function(data){
$("#getResponse").html(data); }//返回的data是字符串类型
);
二 $.post(url,[data],[callback],[type])
说明:这个函数跟$.get()參数差点儿相同。多了一个type參数,type为请求 的数据类型,能够是html,xml,json等类型,假设我们设置这个參数为:json。那么返回的格式则是json格式的。假设没有设置,就 和$.get()返回的格式一样,都是字符串的
$.post("/article/details/51073516",$("#firstName.val()"),function(data){
$("#postResponse").html(data.name);
},"json"//设置了获取数据的类型,所以得到的数据格式为json类型的
);
三 $.ajax(opiton)
说明:$.ajax()这个函数功能强大。能够对ajax进行很多精确的控制。须要具体说明的请參照相关资料
$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});
四 $.getJson (opiton)
$.getJSON("/article/details/51073516",$("#firstName.val()"),function(jsonData){ $("#getJSONResponse").html(jsonData.id);}//无需设置,直接获取的数据类型为json。 所以调用时须要使用jsonData.id方式 );
(不知道用jQuery长了, 会不会丧失对JS的知识了……) 这里如果大家对jQuery语法已经比較熟悉,来对ajax的一些应用作一些总结。
加载静态页面
load( url, [data], [callback] );
url (String) 请求的HTML页的URL地址
data (Map)(可选參数) 发送至server的 key/value 数据
callback (Callback) (可选參数) 请求完毕时(不须要是success的)的回调函数
$('#ajax-div').load('data.html');
这样,data.html的内容将被加载到ID为ajax-div的DOM对象之内。
你甚至能够通过制定ID来实现加载部分内容的Ajax操作,如:
$('#ajax-div').load('data.html#my-section');
实现GET和POST方法
get( url, [data], [callback] )
url (String) 发送请求的URL地址.
data (Map)(可选參数) 要发送给server的数据。以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中
callback (Callback) (可选參数) 加载成功时回调函数(仅仅有当Response的返回状态是success才是调用该方法)
非常显然这是一个专门实现GET方式的函数,使用起来也相当的简单
代码例如以下:
$.get('/article/details/51073516', {
id: 'Robin',
password: '123456',
gate: 'index'
}, function(data, status) {
//data为返回对象,status为请求的状态
alert(data);
//此时如果server脚本会返回一段文字"你好,Robin!",
那么浏览器就会弹出对话框显示该段文字
alert(status);
//结果为success, error等等。但这里是成功时才干执行的函数
});
post( url, [data], [callback], [type] )
url (String) 发送请求的URL地址.
data (Map)(可选參数) 要发送给server的数据,以 Key/value 的键值对形式表示
callback (Callback) (可选參数) 加载成功时回调函数(仅仅有当Response的返回状态是success才是调用该方法)
type (String) (可选參数) 请求数据的类型,xml,text,json等
相同是jQuery提供的一个简便函数,其有使用方法
$.post('/article/details/51073516', {
id:'Robin',
password: '123456',
type:'user'
},function(data, status) {
alert(data);
}, "json");
事件驱动的脚本加载函数:getScript()
getScript( url, [callback] )
url (String) 待加载 JS 文件地址
callback (Function) (可选) 成功加载后回调函数
getScript()函数能够远程加载JavaScript脚本而且运行。这个函数能够跨 域加载JS文件(奇妙……?!)。这个函数的意义是巨大 的。它能够非常大程度的缩减页面初次加载的代码量,由于你能够依据用户的交互来加载对应的JS文件,而不必在页面初始化的时候所有加载。
$.getScript('ajaxEvent.js', function() {
alert("Scripts Loaded!");
//加载ajaxEvent.js。而且在成功加载后显示对话框提示。 });
构建数据通讯的桥梁:getJSON()
getJSON(url,[data],[callback])
url (String) 发送请求地址
data (Map) (可选) 待发送 Key/value 參数
callback (Function) (可选) 加载成功时回调函数。
JSON是一种理想的传输数据格式。它能够非常好的融合与JavaScript或其它宿主语 言。而且能够被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送”裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,仅仅是设置了JSON參数的 ajax()函数的一个简化版本号。这个函数也是能够跨域使用的,相比get()、post()有一定优势。
另外这个函数能够通过把请求url写 成”myurl?callback=X”这样的格式,让程序运行回调函数X。
$.getJSON('/article/details/51073516',{
request: images,
id: 001,
size: large
}, function(json) {
alert(json.images[0].link);
//此处json就是远程传回的json对象,如果其格式例如以下:
//{'images' : [
// {link: images/001.jpg, x :100, y : 100},
// {link: images/002.jpg, x : 200, y 200:}
//]};
}
);
更底层的ajax()函数
尽管get()和post()函数很简洁易用,可是对于更复杂的一些设计需求还是无法实现,比方在ajax发送的不同一时候段做出不同的动作等。
jQuery提供一个更为详细的函数:ajax()。
ajax( options )
ajax()提供了一大票參数,所以能够实现相当复杂的功能。
參数名 | 类型 | 描写叙述 |
url | String | (默认: 当前页地址) 发送请求的地址。 |
type | String |
(默认: “GET”) 请求方式 (“POST” 或 “GET”), 默觉得 “GET”。 注意:其他 HTTP 请求方法。如 PUT 和 DELETE 也能够使用,但仅部分浏览器支持。 |
timeout | Number |
设置请求超时时间(毫秒)。
此设置将覆盖全局设置。 |
async | Boolean |
(默认: true) 默认设置下,全部请求均为异步请求。
假设须要发送同步请求,请将此选项设置为 false。 |
beforeSend | Function |
发送请求前可改动 XMLHttpRequest 对象的函数。如加入自己定义 HTTP 头。
XMLHttpRequest 对象是唯一的參数。 function (XMLHttpRequest) { this; // the options for this ajax request } function (XMLHttpRequest) { this; // the options for this ajax request } |
cache | Boolean | (默认: true) jQuery 1.2 新功能。设置为 false 将不会从浏览器缓存中载入请求信息。 |
complete | Function |
请求完毕后回调函数 (请求成功或失败时均调用)。
參数: XMLHttpRequest 对象。成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } |
contentType | String | (默认: “application/x-www-form-urlencoded”) 发送信息至server时内容编码类型。默认值适合大多数应用场合。 |
data |
Object, String |
发送到server的数据。将自己主动转换为请求字符串格式。GET 请求中将附加在 URL 后。 查看 processData 选项说明以禁止此自己主动转换。必须为 Key/Value 格式。 假设为数组,jQuery 将自己主动为不同值相应同一个名称。 如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2′。 |
dataType | String |
预期server返回的数据类型。假设不指定,jQuery 将自己主动依据 HTTP 包 MIME 信息 返回 responseXML 或 responseText,并作为回调函数參数传递,可用值: “xml”: 返回 XML 文档。可用 jQuery 处理。 “html”: 返回纯文本 HTML 信息。包括 script 元素。 “script”: 返回纯文本 JavaScript 代码。 不会自己主动缓存结果。 “json”: 返回 JSON 数据 。 “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时, 如 “myurl? callback=?” jQuery 将自己主动替换 ? 为正确的函数名,以运行回调函数。 |
error | Function |
(默认: 自己主动推断 (xml 或 html)) 请求失败时将调用此方法。
这种方法有三个參数:XMLHttpRequest 对象。错误信息,(可能)捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown仅仅有当中一个有值 this; // the options for this ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown仅仅有当中一个有值 this; // the options for this |
global | Boolean |
(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,
如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
ifModified | Boolean |
(默认: false) 仅在server数据改变时获取新数据。
使用 HTTP 包 Last-Modified 头信息推断。 |
processData | Boolean |
(默认: true) 默认情况下。发送的数据将被转换为对象(技术上讲并不是字符串)
以配合默认内容类型 “application/x-www-form-urlencoded”。 假设要发送 DOM 树信息或其他不希望转换的信息。请设置为 false。 |
success | Function |
请求成功后回调函数。这种方法有两个參数:server返回数据,返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } |
你能够指定xml、script、html、json作为其数据类型,能够为beforeSend、error、sucess、complete等状态设置 处理函数,众多其他參数也能够订完全然全定义用户的Ajax体验。
以下的样例中。我们用ajax()来调用一个XML文档:
$.ajax({
url: 'doc.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
alert(xml);
//此处xml就是XML的jQuery对象了。你能够用find()、next()或XPath等方法在里面寻找节点。
和用jQuery操作HTML对象没有差别
}
});
进一步了解AJAX事件
前面讨论的一些方法都有自己的事件处理机制。从页面总体来说,都仅仅能说是局部函数。jQuery提供了AJAX全局函数的定义。以满足特殊的需求。
以下是jQuery提供的全部函数(依照触发顺序排列例如以下):
ajaxStart
(全局事件) 開始新的Ajax请求。而且此时没有其它ajax请求正在进行
beforeSend
(局部事件) 当一个Ajax请求開始时触发。假设须要,你能够在这里设置XMLHttpRequest对象
ajaxSend
(全局事件) 请求開始前触发的全局事件
success
(局部事件) 请求成功时触发。
即server没有返回错误,返回的数据也没有错误
ajaxSuccess
全局事件全局的请求成功
error
(局部事件) 仅当错误发生时触发。你无法同一时候运行success和error两个回调函数
ajaxError
全局事件全局的错误发生时触发
complete
(局部事件) 无论你请求成功还是失败,即便是同步请求,你都能在请求完毕时触发这个事件
ajaxComplete
全局事件全局的请求完毕时触发
ajaxStop
(全局事件) 当没有Ajax正在进行中的时候,触发
局部事件在之前的函数中都有介绍,我们主要来看看全局事件。
对某个对象进行全局事件监听。那么全局中的AJAX动作。都会对其产生影响。比方,当页面在进行AJAX操作时,ID为”loading”的DIV就显示出来:
$("#loading").ajaxStart(function(){
$(this).show();
});
全局事件也能够帮助你编写全局的错误对应和成功对应,而不须要为每一个AJAX请求独立设置。有必要指出,全局事件的參数是非常实用的。
除了 ajaxStart、ajaxOptions,其它事件均有event, XMLHttpRequest, ajaxOptions三个參数。
第一个參数即事件本身;第二个是XHR对象;第三个是你传递的ajax參数对象。在一个对象里显示全局的AJAX情况:
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("正在请求"+o.url);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.url+"请求成功");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.url+"请求失败");
});
非常显然,第三个參数也能够帮助你传递你在AJAX事件里增加的自己定义參数。 在单个AJAX请求时,你能够将global的值设为false,以将此请求独立于AJAX的全局事件。
$.ajax({
url: "/article/details/51073516",
global: false,
// 禁用全局Ajax事件.
});
假设你想为全局AJAX设置參数,你会用上ajaxSetup()函数。比如。将全部AJAX请求都传递到request.php,;禁用全局方法;强制用POST方法传递:
$.ajaxSetup({
url: "/article/details/51073516",
global: false,
type: "POST"
});
一些你不得不知道的方法
写AJAX肯定离不开从页面获取对应的值。
在这里简单列举一些方法:
val()
val()函数能够返回表单组建的值,比如不论什么种类input的值。
配合选择符操作,你能够轻易获取选项组、输入框、button等元素的值。
$("input[name='info']:text").val();
//返回名字为info的文本框的值
$("input[name='pass']:password").val();
//返回名字为pass的password框的值
$("input[name='save']:radio").val();
//返回名字为save的单选项的值
//以此类推
serialize()
serialize函数能够帮你把表单对象的全部值都转换为字符串序列。假设你要写GET格式的请求,这个就很方便了。
serializeArray()和serialize()类似,仅仅只是它返回的是JSON对象。
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的使用方法总结的更多相关文章
- JQuery中的$.getScript()、$.getJson()和$.ajax()方法
$.getScript() 有时候,在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的.虽然可以在需要哪个JavaScript文件时,动态地创建<script>标签, ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- jQuery学习小结3——AJAX
一.jQuery的Ajax方法 jQuery对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装: 最底层的封装方法为——$.ajax ...
- 转载 : Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...
- Jquery重新学习之八[Ajax运用总结B]
上一篇简单介绍普通javascript以及Jquery的AJAX方法,其中Jquery.ajax()是功能比较强悍的底层方法,可以更多地关注实现过程中的细节:除Jquery.ajax()方法外,Jqu ...
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON(),$.getScript(),$.load()的用法总结
参考文档 : https://blog.csdn.net/jiandanokok/article/details/48809717 本文是对Jquery中$.get(),$.post(),$.aja ...
- jQuery 提供多个与 AJAX 有关的方法。
jQuery 提供多个与 AJAX 有关的方法. 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本.HTML.XML 或 JSON - ...
- 解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&q ...
随机推荐
- java web开发中常用的协议的使用和java-web 常见的缓冲技术
一.DNS协议 作用将域名解析为IP 类似于我们只需要知道中央一台,中央二台,而不需要知道它的频率,方便记忆. java dns 域名解析协议实现 1 域名解析,将域名可转换为ip地址InetAd ...
- c++内联函数解析(inline)
一.基本定义 inline是C++语言中的一个关键字,可以用于程序中定义内联函数,inline的引进使内联函数的定义更加简单.说到内联函数,这里给出比较常见的定义,内联函数是C++中的一种特殊函数,它 ...
- 201621123079《java程序设计》第六周作业总结
作业06-接口.内部类 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 2. 书面作业 1. c ...
- Linux I2C驱动
Linux I2C 驱动结构 i2c体系结构由三部分组成 i2C core i2c core提供了i2c 总线驱动 和 设备驱动的注册,注销方法 i2C and SMBus protocol 实现 i ...
- KNN算法原理及实现
1.KNN算法概述 kNN算法的核心思想是如果一个样本在特征空间中的k个最相邻的样本中的大多数属于某一个类别,则该样本也属于这个类别,并具有这个类别上样本的特性.该方法在确定分类决策上只依据最邻近的一 ...
- 微信小程序request请求动态获取数据
微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:909 ...
- 痛苦的版本对齐(3) cygwin下的路径引用(sed解决篇)
上次问题(见http://www.cnblogs.com/yvivid/p/3546649.html),.depend信息路径错误的问题. 主要尝试了,在(虚拟机下构建)linux下编译,确实没有问题 ...
- 「LibreOJ β Round #3」绯色 IOI(抵达)
[题解] 我们可以发现叶子节点的关联点一定是它的父亲节点,那么我们dfs一遍就可以求出所有节点的关联点,或者判断出无解. 对于每个点i,它的关联点u的危险度肯定比它连接的其他点vi的危险度小,我们从u ...
- 异常 Failed to bind NettyServer on /10.133.7.216:29105, cause: Failed to bind to: /0.0.0.0:29105
"C:\Program Files\Java\jdk1.7.0_80\bin\java" -agentlib:jdwp=transport=dt_socket,address=12 ...
- Binary mod and divide(模拟+大数)
描述 Most people know that the binary operations. Do you know the binary mod and divide? Now give the ...