資訊專欄INFORMATION COLUMN
摘要：如果不指定，將自動(dòng)根據(jù)包信息返回或，并作為回調(diào)函數(shù)參數(shù)傳遞。調(diào)用本次請(qǐng)求時(shí)傳遞的參數(shù)要求為類型的參數(shù)，請(qǐng)求完成后調(diào)用的回調(diào)函數(shù)請(qǐng)求成功或失敗時(shí)均調(diào)用。由服務(wù)器返回，并根據(jù)參數(shù)進(jìn)行處理后的數(shù)據(jù)。
這篇東西本身是非常基礎(chǔ)的，但是經(jīng)常在處理ajax返回值的時(shí)候還是會(huì)犯各種小錯(cuò)誤，所以就想到把這些方法結(jié)合以前寫過(guò)的代碼片段整理一下，方便以后復(fù)習(xí)和使用。另外呢，雖然能搜到很多類似的文檔，但是整理一份自己的還是墜吼的=￣ω￣=
ajax方法的參數(shù)常用的ajax參數(shù)比如url,data,type,包括預(yù)期返回類型dataType，發(fā)送到服務(wù)器的數(shù)據(jù)的編碼類型contentType,成功方法，失敗方法，完成方法。除了這些以外還有很多其他內(nèi)置的參數(shù)
需要注意的是：
1.url:
要求為String類型的參數(shù)，（默認(rèn)為當(dāng)前頁(yè)地址）發(fā)送請(qǐng)求的地址。
2.type:
要求為String類型的參數(shù)，請(qǐng)求方式（post或get）默認(rèn)為get。注意其他http請(qǐng)求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。
3.timeout:
要求為Number類型的參數(shù)，設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）。此設(shè)置將覆蓋$.ajaxSetup()方法的全局設(shè)置。
4.async:
要求為Boolean類型的參數(shù)，默認(rèn)設(shè)置為true，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其他操作必須等待請(qǐng)求完成才可以執(zhí)行。
5.cache:
要求為Boolean類型的參數(shù)，默認(rèn)為true（當(dāng)dataType為script時(shí)，默認(rèn)為false），設(shè)置為false將不會(huì)從瀏覽器緩存中加載請(qǐng)求信息。
6.data:
要求為Object或String類型的參數(shù)，發(fā)送到服務(wù)器的數(shù)據(jù)。如果已經(jīng)不是字符串，將自動(dòng)轉(zhuǎn)換為字符串格式。get請(qǐng)求中將附加在url后。防止這種自動(dòng)轉(zhuǎn)換，可以查看 processData選項(xiàng)。對(duì)象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉(zhuǎn)換為&foo1=bar1&foo2=bar2。如果是數(shù)組，JQuery將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。例如{foo:["bar1","bar2"]}轉(zhuǎn)換為&foo=bar1&foo=bar2。
7.dataType:
要求為String類型的參數(shù)，預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，JQuery將自動(dòng)根據(jù)http包mime信息返回responseXML或responseText，并作為回調(diào)函數(shù)參數(shù)傳遞。可用的類型如下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標(biāo)簽會(huì)在插入DOM時(shí)執(zhí)行。
script：返回純文本JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠(yuǎn)程請(qǐng)求時(shí)（不在同一個(gè)域下），所有post請(qǐng)求都將轉(zhuǎn)為get請(qǐng)求。
json：返回JSON數(shù)據(jù)。
jsonp：JSONP格式。使用SONP形式調(diào)用函數(shù)時(shí)，例如myurl?callback=?，JQuery將自動(dòng)替換后一個(gè)“?”為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
text：返回純文本字符串。
8.beforeSend：
要求為Function類型的參數(shù)，發(fā)送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請(qǐng)求。XMLHttpRequest對(duì)象是惟一的參數(shù)。
function(XMLHttpRequest){
this; //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
}
9.complete：
要求為Function類型的參數(shù)，請(qǐng)求完成后調(diào)用的回調(diào)函數(shù)（請(qǐng)求成功或失敗時(shí)均調(diào)用）。參數(shù)：XMLHttpRequest對(duì)象和一個(gè)描述成功請(qǐng)求類型的字符串。
function(XMLHttpRequest, textStatus){
this; //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
}
10.success：要求為Function類型的參數(shù)，請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)，有兩個(gè)參數(shù)。
(1)由服務(wù)器返回，并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)。
(2)描述狀態(tài)的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
}
11.error:
要求為Function類型的參數(shù)，請(qǐng)求失敗時(shí)被調(diào)用的函數(shù)。該函數(shù)有3個(gè)參數(shù)，即XMLHttpRequest對(duì)象、錯(cuò)誤信息、捕獲的錯(cuò)誤對(duì)象(可選)。ajax事件函數(shù)如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個(gè)包含信息
this; //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)
}
12.contentType：
要求為String類型的參數(shù)，當(dāng)發(fā)送信息至服務(wù)器時(shí)，內(nèi)容編碼類型默認(rèn)為"application/x-www-form-urlencoded"。該默認(rèn)值適合大多數(shù)應(yīng)用場(chǎng)合。
13.dataFilter：
要求為Function類型的參數(shù)，給Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。提供data和type兩個(gè)參數(shù)。data是Ajax返回的原始數(shù)據(jù)，type是調(diào)用jQuery.ajax時(shí)提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。
function(data, type){
//返回處理后的數(shù)據(jù)
return data;
}
14.dataFilter：
要求為Function類型的參數(shù)，給Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。提供data和type兩個(gè)參數(shù)。data是Ajax返回的原始數(shù)據(jù)，type是調(diào)用jQuery.ajax時(shí)提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。
function(data, type){
//返回處理后的數(shù)據(jù)
return data;
}
15.global：
要求為Boolean類型的參數(shù)，默認(rèn)為true。表示是否觸發(fā)全局ajax事件。設(shè)置為false將不會(huì)觸發(fā)全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。
16.ifModified：
要求為Boolean類型的參數(shù)，默認(rèn)為false。僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。服務(wù)器數(shù)據(jù)改變判斷的依據(jù)是Last-Modified頭信息。默認(rèn)值是false，即忽略頭信息。
17.jsonp：
要求為String類型的參數(shù)，在一個(gè)jsonp請(qǐng)求中重寫回調(diào)函數(shù)的名字。該值用來(lái)替代在"callback=?"這種GET或POST請(qǐng)求中URL參數(shù)里的"callback"部分，例如{jsonp:‘onJsonPLoad‘}會(huì)導(dǎo)致將"onJsonPLoad=?"傳給服務(wù)器。
18.username：
要求為String類型的參數(shù)，用于響應(yīng)HTTP訪問(wèn)認(rèn)證請(qǐng)求的用戶名。
19.password：
要求為String類型的參數(shù)，用于響應(yīng)HTTP訪問(wèn)認(rèn)證請(qǐng)求的密碼。
20.processData：
要求為Boolean類型的參數(shù)，默認(rèn)為true。默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對(duì)象（從技術(shù)角度來(lái)講并非字符串）以配合默認(rèn)內(nèi)容類型"application/x-www-form-urlencoded"。如果要發(fā)送DOM樹(shù)信息或者其他不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為false。
21.scriptCharset：
要求為String類型的參數(shù)，只有當(dāng)請(qǐng)求時(shí)dataType為"jsonp"或者"script"，并且type是GET時(shí)才會(huì)用于強(qiáng)制修改字符集(charset)。通常在本地和遠(yuǎn)程的內(nèi)容編碼不同時(shí)使用。
案例代碼：
$(function(){
$(‘#send‘).click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$(‘#resText‘).empty(); //清空resText里面的所有內(nèi)容
var html = ‘‘;
$.each(data, function(commentIndex, comment){
html += ‘
22.順便說(shuō)一下$.each()函數(shù):
$.each()函數(shù)不同于JQuery對(duì)象的each()方法，它是一個(gè)全局函數(shù)，不操作JQuery對(duì)象，而是以一個(gè)數(shù)組或者對(duì)象作為第1個(gè)參數(shù)，以一個(gè)回調(diào)函數(shù)作為第2個(gè)參數(shù)。回調(diào)函數(shù)擁有兩個(gè)參數(shù)：第1個(gè)為對(duì)象的成員或數(shù)組的索引，第2個(gè)為對(duì)應(yīng)變量或內(nèi)容。
需要注意的地方：
1. 如果不指定dataType的話，會(huì)根據(jù)返回的頭部信息判斷（就是Content-type）。
綜論ajax返回3種數(shù)據(jù)格式：html文本格式，xml通用格式，json格式，
數(shù)據(jù)類型：整數(shù)，字符串，數(shù)組，對(duì)象
/**
* ajax_delete
*/
$(".delete").click(function(){
var id = $(this).attr("id");
var flag = confirm("確定要?jiǎng)h除第"+id+"條信息嗎？");
if(flag){
var tr = $(this).parent().parent();
$.get("index.php?r=demo1/delete",{id:id},function(data){
console.log(data);
if(data==1){
tr.remove();
alert("刪除成功");
}else{
alert("刪除失敗");
}
})
}
})
這樣，后臺(tái)一個(gè)判斷，執(zhí)行則返回1就好了，可以說(shuō)是最簡(jiǎn)單的ajax了。
通常返回整形都是做判斷用。是否刪除啊，.....，雖然簡(jiǎn)單，但是很常用。
與上面返回int相對(duì)應(yīng)的呢...比如ajax添加，就會(huì)返回html或者text，也就是string類型的數(shù)據(jù)。
ajax返回json因?yàn)閖son沒(méi)有格式，相同內(nèi)容占用空間少處理快，所以較xml，字符串(text/html)而言，我們更經(jīng)常處理json。
$.ajax({
type:"GET",
url:"address_do.php",
//dataType:"json",
data:{postcode:postcode},
success:function(data){
console.log(data);
location.href="address_do.php";
if(data.success == 1){
var str = "";
str += ""+data.result.lists[0].simcall+"
";
str += ""+data.result["asc"]+"
";
$("button").after(""+str+"");
}
}
})
$(function(){
$("#search").click(function(){
var title = $("#title").val();/*alert(title);*/
$.ajax({
type:"GET",
url:"index_baidu_do.php",//
dataType:"json",
data:{"title":title},
success:function(data){
var str = "";
if(data == 0){
str+="沒(méi)有搜索到相關(guān)數(shù)據(jù) ";
}else{
for(var i=0;i";
str+=""+data[i].content+" ";
str+=""+data[i].website+" ";
str+=""+data[i].time+" ";
str+="";
}
}
$("#table").html(str);
}
})
})
})
$.get(url,data,function(msg){
msg = eval("("+msg+")");
if(!(/^[0-9][0-9]{5}$/.test(postcode))){
str += "您輸入的郵政編碼不正確
";
$("button").after(""+str+"");
}else{
str += ""+msg.result.lists[0].simcall+"
";
str += ""+msg.result["asc"]+"
";
$("button").after(""+str+"");
}
},"json");alert(data);
success:function(data){
console.log(data);
var result = data["result"];
var str = "";
str += "手機(jī)號(hào) 歸屬地 區(qū)號(hào) 數(shù)據(jù)來(lái)源 "+result["phone"]+" "+result["att"]+" "+result["postno"]+"
";
$("#click").after(str);
}
$.ajax({
type: "GET",
url: "Ajax/Test.ashx",
data: "HandleType=GetList&PName=" + escape($("#localvalue").val()), //要發(fā)送的數(shù)據(jù)
dataType: "text",
success: function (data) {
if (data != null && data != "") {
var dataObj = eval("(" + data + ")"); //轉(zhuǎn)換為json對(duì)象
var html = "";
for (var i = 0; i < dataObj.length; i++) {
html += "";
html += "" + (parseInt(i) + parseInt(1)) + " " + dataObj[i].Name + " ";
html += " ";
}
$("#table").html(html);
}
}
})
html部分
eval的使用
PS：紅色部分是容易出錯(cuò)的地方，也就是ajax返回?cái)?shù)據(jù)的拼接,也是ajax的難點(diǎn)之一。
另外，需要注意的是，這段代碼里設(shè)定返回?cái)?shù)據(jù)類型是text，所以需要用eval把返回?cái)?shù)據(jù)處理
參考http://blog.csdn.net/ztzy520/...
用eval()方法把返回來(lái)的json數(shù)據(jù)轉(zhuǎn)換成數(shù)組
data=eval("("+data+")");
$("#search").click(function(){
var obj = $(this);
var searchContent = obj.prev().val();
alert(searchContent);
$.ajax({
url:"index.php?r=news/search",
type:"post",
dataType:"json",
data:{searchContent:searchContent},
success:function(data){
var str = "";
str+="";
str+="";
str+="ID ";
str+="新聞標(biāo)題 ";
str+="新聞內(nèi)容 ";
str+="分類 ";
str+="圖片 ";
str+="操作 ";
str+=" ";
if(data == 0){
str+="沒(méi)有搜索到相關(guān)數(shù)據(jù) ";
}else{
for(var i=0;i";
str+=""+data[i].newsTitle+" ";
str+=""+data[i].newsContent+" ";
str+=""+data[i].cate_name+" ";
str+="![]()
刪除/修改 ";
str+="";
}
}
$("#table").html(str);
}
})
})
說(shuō)實(shí)話，即使把這個(gè)掌握了，即使是處理一些最簡(jiǎn)單的項(xiàng)目也并不是能輕易拿下，因?yàn)閷?shí)際生產(chǎn)環(huán)境涉及到的業(yè)務(wù)邏輯啊，框架啊（比如yii框架會(huì)默認(rèn)加載模板，這樣返回值會(huì)很難處理）等等一些我們意想不到的東西。但是我目前的看法是，ajax處理的話代碼邏輯會(huì)非常清晰，再者說(shuō)ajax的確是作為一個(gè)碼農(nóng)最基本的技能之一。
第一次寫博客兼學(xué)識(shí)有限，以后還會(huì)有修改，求輕拍。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83022.html
相關(guān)文章
-
ES6 Fetch API HTTP請(qǐng)求實(shí)用指南
摘要：例子張三刪除用戶為了刪除用戶，我們首先需要定位用戶，然后我們定義方法類型。例子張三結(jié)論現(xiàn)在，你已基本了解如何使用的從服務(wù)器檢索或操作資源，以及如何處理。您可以使用本文作為如何構(gòu)建操作的請(qǐng)求的指南。
showImg(https://segmentfault.com/img/bVbjxqh?w=1000&h=562);
本次將介紹如何使用Fetch API（ES6 +）對(duì)REST API的...
-
Jquery 以及AngularJS 中 Get/Post 傳參筆記
摘要：傳參并不是很難的事，但有時(shí)牽扯到例如要傳一個(gè)對(duì)象或者到后端的時(shí)候就會(huì)有些麻煩，在這里總結(jié)一些使用方法。在中可以通過(guò)設(shè)定來(lái)解決在中就比較難設(shè)定，參見(jiàn)錯(cuò)誤之處或者更多方案歡迎提出，謝謝
傳參并不是很難的事，但有時(shí)牽扯到例如要傳一個(gè)對(duì)象或者form到后端的時(shí)候就會(huì)有些麻煩，在這里總結(jié)一些使用方法。
首先先介紹發(fā)送請(qǐng)求時(shí)我們經(jīng)常會(huì)混淆的幾個(gè)屬性：dataType: 期待服務(wù)器返回的數(shù)據(jù)格式mi...
-
JavaScript 需要檢查變量類型嗎
摘要：一返回值調(diào)用外部方法獲取的值需要對(duì)類型做判斷，因?yàn)槲覀儗?duì)方法返回的值是有期望值類型，但是卻不能保證這個(gè)接口返回的值一直是同一個(gè)類型。
19年目標(biāo)：消滅英語(yǔ)！我新開(kāi)了一個(gè)公眾號(hào)記錄一個(gè)程序員學(xué)英語(yǔ)的歷程
有提升英語(yǔ)訴求的小伙伴可以關(guān)注公眾號(hào)：csenglish 程序員學(xué)英語(yǔ)，每天花10分鐘交作業(yè)，跟我一起學(xué)英語(yǔ)吧
javascript作為一門動(dòng)態(tài)類型語(yǔ)言，具有很高的動(dòng)態(tài)靈活性，當(dāng)定義函數(shù)...
-
SpringMVC接收和響應(yīng)json數(shù)據(jù)
摘要：客戶端提交阻止默認(rèn)事件得到搜索框數(shù)據(jù)值轉(zhuǎn)為的方法失敗啦當(dāng)前請(qǐng)求方式為控制臺(tái)輸出當(dāng)前請(qǐng)求方式為客戶端彈窗三以方式接收以數(shù)組形式傳遞客戶端失敗啦注意傳遞到后端時(shí)應(yīng)為的格式數(shù)據(jù)，否則可能會(huì)出現(xiàn)錯(cuò)誤。
前后端的數(shù)據(jù)交互，除了通過(guò)form表單進(jìn)行提交外，也可以通過(guò)ajax向后端傳遞和接收json格式數(shù)據(jù)（這種方式可以實(shí)現(xiàn)請(qǐng)求數(shù)據(jù)和頁(yè)面分離）。本文將總結(jié)一下在Spring MVC中接收和響應(yīng)jso...
-
PHP筆試面試題精選（一）
摘要：，跨站腳本攻擊。實(shí)際發(fā)的請(qǐng)求就是，用于表示這是一個(gè)請(qǐng)求。，用于告知服務(wù)器根據(jù)這個(gè)參數(shù)獲取回調(diào)函數(shù)的名稱，通常約定就叫。，回調(diào)函數(shù)的名稱，也是前面參數(shù)的值，可省略，會(huì)自動(dòng)生成。
本次課程主要圍繞 PHP 面試和筆試中經(jīng)常會(huì)出現(xiàn)的一些知識(shí)點(diǎn)，但是面試官會(huì)在筆試題基礎(chǔ)上深入擴(kuò)展，那么你知道如何更好的回答讓面試官滿意嗎？題目收集自騰訊，迅雷，美圖等公司的筆試面試題，以及本人面試經(jīng)歷中印象中的知...
發(fā)表評(píng)論
0條評(píng)論
Lin_R
男|高級(jí)講師
TA的文章
閱讀更多
tensorflow標(biāo)準(zhǔn)化
閱讀 2655·2023-04-26 02:44
極客業(yè)務(wù)架構(gòu)實(shí)戰(zhàn)營(yíng)李運(yùn)華
閱讀 8252·2021-11-22 14:44
[C/C++]C++的IO流
閱讀 2119·2021-09-27 13:36
舍利云：linode月拋機(jī)上線，新加坡機(jī)房2核4G內(nèi)存80G ssd，100元/臺(tái)，附簡(jiǎn)單測(cè)評(píng)
閱讀 2463·2021-09-08 10:43
display有哪些值 與 position的值relative和absolute定位的原點(diǎn)是？
閱讀 676·2019-08-30 15:56
實(shí)現(xiàn)marquee滾動(dòng)效果
閱讀 1392·2019-08-30 15:55
用“五個(gè)為什么”寫CSS
閱讀 2887·2019-08-28 18:12
React Hook 不完全指南
閱讀 2826·2019-08-26 13:50
最新活動(dòng)
閱讀需要支付1元查看
‘ + comment[‘username‘] + ‘: