快捷導(dǎo)航

jQuery調(diào)用WebService返回JSON數(shù)據(jù)及參數(shù)設(shè)置注意問(wèn)題

更新時(shí)間：2013年01月25日 09:19:16 作者：

.NET Framework 3.5的發(fā)布解決了WebService調(diào)用中json問(wèn)題，本文將介紹jQuery調(diào)用基于.NET Framework 3.5的WebService返回JSON數(shù)據(jù),感興趣的朋友可以了解下，希望本文對(duì)你有所幫助

.NET Framework 3.5的發(fā)布解決了WebService調(diào)用中json問(wèn)題，本文將介紹jQuery調(diào)用基于.NET Framework 3.5的WebService返回JSON數(shù)據(jù)，另外還要介紹一下用jQuery調(diào)用WebService的參數(shù)設(shè)置及設(shè)置不當(dāng)所出現(xiàn)的問(wèn)題，還有出現(xiàn)問(wèn)題的原因

jQuery調(diào)用WebService網(wǎng)上的介紹也比較多，最近的項(xiàng)目中我也用到不少，一直都很少用.NET Ajax，比較鐘情于jQuery調(diào)用請(qǐng)求WebService有幾種方法，這主要說(shuō)一下POST與GET方法，其實(shí)安全方法考慮不建議使用GET方法，下面就說(shuō)一下用jquery調(diào)用WebService的參數(shù)設(shè)置及設(shè)置不當(dāng)所出現(xiàn)的問(wèn)題，還有出現(xiàn)問(wèn)題的原因。我們這里只討論返回JSON數(shù)據(jù)的情況，相信大家都比較了解JSON格式的數(shù)據(jù)對(duì)于ajax的方便，不了解的可以從網(wǎng)上找一下這方面的資料來(lái)看一下，這里就不多說(shuō)了，或者我以后再寫一篇這方面的文章。

下面是jQuery調(diào)用WebService服務(wù)器端代碼：

WS1和WS2方法為POST方法請(qǐng)求的方法，所以設(shè)置UseHttpGet 為false，WS3與WS4為GET方法請(qǐng)求的方法，設(shè)置UseHttpGet 為true。

復(fù)制代碼代碼如下:

using System.Web.Script.Services; 
using System.Web.Services; 
namespace WebService35 
{ 
/// 
/// WebService1 的摘要說(shuō)明 
/// 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[System.ComponentModel.ToolboxItem(false)] 
// 若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù)，請(qǐng)取消對(duì)下行的注釋。 
[System.Web.Script.Services.ScriptService] 
public class WebService1 : System.Web.Services.WebService 
{ 
[WebMethod] 
[ScriptMethod(UseHttpGet = false)] 
public string WS1() 
{ 
return "POST無(wú)參數(shù)"; 
} 
[WebMethod] 
[ScriptMethod(UseHttpGet = false)] 
public string WS2(string s) 
{ 
return s; 
} 
[WebMethod] 
[ScriptMethod(UseHttpGet = true)] 
public string WS3() 
{ 
return "GET無(wú)參數(shù)"; 
} 
[WebMethod] 
[ScriptMethod(UseHttpGet = true)] 
public string WS4(string s) 
{ 
return s; 
} 
} 
} 

復(fù)制代碼代碼如下:

function fun1() { 
$.ajax({ 
url: "WebService1.asmx/WS1", 
type: "POST", 
dataType: "json", 
contentType: "application/json; charset=utf-8", 
data: "", 
success: function(json) { 
alert(json.d); 
}, 
error: function(x, e) { 
alert(x.responseText); 
}, 
complete: function(x) { 
alert(x.responseText); 
} 
}); 
} 

上面的JS方法為用POST方法請(qǐng)求無(wú)參數(shù)的WebService方法的代碼，不過(guò)以上代碼并不能返回正確的JSON格式的數(shù)據(jù)，而是返回XML格式的數(shù)據(jù)，回為要使WebService返回JSON格式的數(shù)據(jù)，要在Request Headers中設(shè)置Content-Type為application/json，有人要問(wèn)了，你不設(shè)置了contentType為 “application/json; charset=utf-8”了嗎？沒(méi)錯(cuò)，是設(shè)置了，不過(guò)在jquery中，如果Content-Length為0或者沒(méi)有設(shè)置，它會(huì)忽略你設(shè)置的 contentType的，我可以看下面的這個(gè)圖，這是抓取的Request Headers的數(shù)據(jù)，可以看到Content-Length為0，并且沒(méi)有Content-Type，所WebService就不知道我們需要JSON 格式的數(shù)據(jù)，它就返回了默認(rèn)的XML格式的數(shù)據(jù)給我們，之所以為0，是因?yàn)槲覜](méi)有提交任何數(shù)據(jù)。

組織結(jié)構(gòu)

這要怎么辦呢？繼續(xù)看下面的JS代碼，因?yàn)槲覀冞@里是調(diào)用的一個(gè)沒(méi)能參數(shù)的WebService方法，所以我們可以提交一個(gè)空和JSON對(duì)象“{}"，如下所示，設(shè)置data為{}。

復(fù)制代碼代碼如下:

function fun1() { 
$.ajax({ 
url: "WebService1.asmx/WS1", 
type: "POST", 
dataType: "json", 
contentType: "application/json; charset=utf-8", 
data: "{}", 
success: function(json) { 
alert(json.d); 
}, 
error: function(x, e) { 
alert(x.responseText); 
}, 
complete: function(x) { 
alert(x.responseText); 
} 
}); 
}

現(xiàn)在我再來(lái)看下圖，可以看到，Content-Length已經(jīng)為2了，并且也有Contetn-Type，還是我們?cè)O(shè)置的值，這樣就能正確的返回JSON數(shù)據(jù)給我們使用了。

返回JSON格式

還有一種方法就是：既然jquery不給我們?cè)O(shè)置Content-Type，我們可以自己設(shè)置，如下面的代碼所示，我們?cè)诎l(fā)送數(shù)據(jù)之前設(shè)置一下Content-Type為“application/json; charset=utf-8”，這樣就可以了。

復(fù)制代碼代碼如下:

function fun1() { 
$.ajax({ 
url: "WebService1.asmx/WS1", 
type: "POST", 
dataType: "json", 
data: "", 
beforeSend: function(x) { 
x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); 
}, 
success: function(json) { 
alert(json.d); 
}, 
error: function(x, e) { 
alert(x.responseText); 
}, 
complete: function(x) { 
alert(x.responseText); 
} 
}); 
} 

下面是我們手工設(shè)置了Content-Type之后抓取的Request Headers，可以看到，即使Content-Length為0，里面也有了正確的Content-Type了。

設(shè)置了Content-Type之后

不過(guò)，需要注意的是：如果我們?cè)O(shè)置了jquery的contentType，又發(fā)送了一個(gè)空的JSON對(duì)象，并且還手工設(shè)置了Content-Type，就如下代碼所示：

復(fù)制代碼代碼如下:

function fun1() { 
$.ajax({ 
url: "WebService1.asmx/WS1", 
type: "POST", 
dataType: "json", 
contentType: "application/json; charset=utf-8", 
data: "{}", 
beforeSend: function(x) { 
x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); 
}, 
success: function(json) { 
alert(json.d); 
}, 
error: function(x, e) { 
alert(x.responseText); 
}, 
complete: function(x) { 
alert(x.responseText); 
} 
}); 
} 

那么在IE發(fā)送的Requst Headers就如下圖所示，你會(huì)看到Content-Type有兩個(gè)用逗號(hào)隔開的值，這是為什么呢？因?yàn)?，jquery為Content-Type設(shè)置了一次值，我們手工又設(shè)置一次，而在IE是多次設(shè)置Content-Type的值它會(huì)追加，而不是替換，不過(guò)這并不影響WebService正確返回 JSON數(shù)據(jù)給我們，不過(guò)應(yīng)該避免這種情況出現(xiàn)。

IE發(fā)送的Requst Headers

如果說(shuō)上面那種設(shè)置兩次Content-Type的值還能正確的返回JSON數(shù)據(jù)，那么下面代碼就不能正確返回JSON數(shù)據(jù)了。

復(fù)制代碼代碼如下:

function fun1() { 
$.ajax({ 
url: "WebService1.asmx/WS1", 
type: "POST", 
dataType: "json", 
data: "{}", 
beforeSend: function(x) { 
x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); 
}, 
success: function(json) { 
alert(json.d); 
}, 
error: function(x, e) { 
alert(x.responseText); 
}, 
complete: function(x) { 
alert(x.responseText); 
} 
}); 
} 

從下圖可以看到Content-Type也有兩個(gè)值，不過(guò)這個(gè)和上面那個(gè)還有點(diǎn)不一樣，這次呢這個(gè)值是不一樣的，一個(gè)是 application/x-www-form-urlencoded，一個(gè)是application/json; charset=utf-8，這種情況就不能正確的返回JSON格式的數(shù)據(jù)了。這又是為什么呢？這是因?yàn)槲覀儧](méi)有為jquery設(shè)置 contentType為，并且又提交了一個(gè)空的JSON對(duì)象，可以為什么這樣就會(huì)使用Content-Type出現(xiàn)這樣的情況的呢？因?yàn)閖query的 ajax用POST方法提交數(shù)據(jù)的時(shí)候，如果沒(méi)有設(shè)置contentType，并且所發(fā)送的數(shù)據(jù)不為空，那么它就會(huì)為ContentType設(shè)置一個(gè)默認(rèn)值，也就是application/x-www-form-urlencoded，所以就會(huì)出現(xiàn)這種情況了。

所以呢，在用POST方法請(qǐng)求的時(shí)候，如果有提交數(shù)據(jù)，也就是jquery ajax的datar屬性不空的情況下（不為空的情況：1.發(fā)送一個(gè)空對(duì)象調(diào)用無(wú)參數(shù)的WebService方法；2.請(qǐng)一個(gè)有參數(shù)的 WebService方法。），一定要設(shè)置contentType屬性，并且不能手工設(shè)置Content-Type了。

手工設(shè)置Content-Type

下面是請(qǐng)求有參數(shù)的WebService方法，一些情況在上面也都說(shuō)過(guò)了，這里就不多說(shuō)了。

不過(guò)有一點(diǎn)要注意，就是用POST方法請(qǐng)求的時(shí)候，不用手工去編碼有漢字的參數(shù)值，如下面的data: "{s:'POST有參數(shù)'}"，就不用寫成data: "{s:"+encodeURI('POST有參數(shù)')+"}"了。

復(fù)制代碼代碼如下:

function fun2() { 
$.ajax({ 
url: "WebService1.asmx/WS2", 
contentType: "application/json; charset=utf-8", 
type: "POST", 
dataType: "json", 
data: "{s:'POST有參數(shù)'}", 
success: function(json) { 
alert(json.d); 
}, 
error: function(x, e) { 
alert(x.responseText); ; 
}, 
complete: function(x) { 
alert(x.responseText); 
} 
}); 
} 

以上是我們說(shuō)的用POST方法請(qǐng)求，下面是用GET方法請(qǐng)求。

下面是一個(gè)用GET方法請(qǐng)求一個(gè)無(wú)參數(shù)的WebService方法，不過(guò)這是一段錯(cuò)誤的代碼，錯(cuò)在哪兒呢，各們童鞋可以自己想一下，我們下面一起說(shuō)。

復(fù)制代碼代碼如下:

function fun3() { 
$.ajax({ 
url: "WebService1.asmx/WS3", 
type: "GET", 
dataType: "json", 
data: "", 
contentType: "application/json; charset=utf-8", 
success: function(json) { 
alert(json.d); 
}, 
error: function(x, e) { 
alert(x.responseText); 
}, 
complete: function(x) { 
alert(x.responseText); 
} 
}); 
} 

下圖是用上面一段代碼請(qǐng)求所抓取的Request Headers，大家看一下，問(wèn)題出在哪里。

請(qǐng)求所抓取的Request Headers

下面的代碼是正確的用GET方法調(diào)用無(wú)參數(shù)的WebService方法。

復(fù)制代碼代碼如下:

function fun3() { 
$.ajax({ 
url: "WebService1.asmx/WS3", 
dataType: "json", 
data: "", 
beforeSend: function(x) { 
x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); 
}, 
success: function(json) { 
alert(json.d); 
}, 
error: function(x, e) { 
alert(x.responseText); 
}, 
complete: function(x) { 
alert(x.responseText); 
} 
}); 
} 

下面的代碼是正確的用GET方法調(diào)用有參數(shù)的WebService方法。

復(fù)制代碼代碼如下:

function fun4() { 
$.ajax({ 
url: "WebService1.asmx/WS4", 
dataType: "json", 
data: encodeURI("s='GET有參數(shù)'"), 
beforeSend: function(x) { 
x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); 
}, 
success: function(json) { 
alert(json.d); 
}, 
error: function(x, e) { 
alert(x.responseText); 
}, 
complete: function(x) { 
alert(x.responseText); 
} 
}); 
} 

下圖是正確的用GET方法(有參數(shù)和無(wú)參數(shù)）調(diào)用WebService方法所抓取的Request Headers。

用GET方法

從上圖可以看到，用GET方法請(qǐng)求，不管是有參數(shù)還是無(wú)參數(shù)，都是沒(méi)有Content-Length的，所以jquery也就不能為我們?cè)O(shè)置 Content-Type了，我只能手工設(shè)置Content-Type，所以我們也就沒(méi)有必要設(shè)置jquery ajax的contentType了。

需要注意的是，GET方法與POST方法不同，有參數(shù)的時(shí)候，如果參數(shù)的值不是ASCII字符，要用encodeURI編一下碼，要不服務(wù)端接收到的數(shù)據(jù)為亂碼。

您可能感興趣的文章: