jQuery調(diào)用WebService返回JSON數(shù)據(jù)
jQuery調(diào)用WebService網(wǎng)上的介紹也比較多，最近的項目中我也用到不少，一直都很少用.NET Ajax，比較鐘情于jQuery調(diào)用請求WebService有幾種方法，這主要說一下POST與GET方法，其實安全方法考慮不建議使用GET方法，下面就說一下用jquery調(diào)用WebService的參數(shù)設(shè)置及設(shè)置不當(dāng)所出現(xiàn)的問題，還有出現(xiàn)問題的原因。我們這里只討論返回JSON數(shù)據(jù)的情況，相信大家都比較了解JSON格式的數(shù)據(jù)對于ajax的方便，不了解的可以從網(wǎng)上找一下這方面的資料來看一下，這里就不多說了，或者我以后再寫一篇這方面的文章。
下面是jQuery調(diào)用WebService服務(wù)器端代碼：
WS1和WS2方法為POST方法請求的方法，所以設(shè)置UseHttpGet 為false，WS3與WS4為GET方法請求的方法，設(shè)置UseHttpGet 為true。
- using System.Web.Script.Services;
- using System.Web.Services;
- namespace WebService35
- {
- ///
- /// WebService1 的摘要說明
- ///
- [WebService(Namespace = "http://tempuri.org/")]
- [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
- [System.ComponentModel.ToolboxItem(false)]
- // 若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù)，請取消對下行的注釋。
- [System.Web.Script.Services.ScriptService]
- public class WebService1 : System.Web.Services.WebService
- {
- [WebMethod]
- [ScriptMethod(UseHttpGet = false)]
- public string WS1()
- {
- return "POST無參數(shù)";
- }
- [WebMethod]
- [ScriptMethod(UseHttpGet = false)]
- public string WS2(string s)
- {
- return s;
- }
- [WebMethod]
- [ScriptMethod(UseHttpGet = true)]
- public string WS3()
- {
- return "GET無參數(shù)";
- }
- [WebMethod]
- [ScriptMethod(UseHttpGet = true)]
- public string WS4(string s)
- {
- return s;
- }
- }
- }
- 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方法請求無參數(shù)的WebService方法的代碼，不過以上代碼并不能返回正確的JSON格式的數(shù)據(jù)，而是返回XML格式的數(shù)據(jù)，回為要使WebService返回JSON格式的數(shù)據(jù)，要在Request Headers中設(shè)置Content-Type為application/json，有人要問了，你不設(shè)置了contentType為“application/json; charset=utf-8”了嗎？沒錯，是設(shè)置了，不過在jquery中，如果Content-Length為0或者沒有設(shè)置，它會忽略你設(shè)置的contentType的，我可以看下面的這個圖，這是抓取的Request Headers的數(shù)據(jù)，可以看到Content-Length為0，并且沒有Content-Type，所WebService就不知道我們需要JSON格式的數(shù)據(jù)，它就返回了默認(rèn)的XML格式的數(shù)據(jù)給我們，之所以為0，是因為我沒有提交任何數(shù)據(jù)。
這要怎么辦呢？繼續(xù)看下面的JS代碼，因為我們這里是調(diào)用的一個沒能參數(shù)的WebService方法，所以我們可以提交一個空和JSON對象“{}"，如下所示，設(shè)置data為{}。
- 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)在我再來看下圖，可以看到，Content-Length已經(jīng)為2了，并且也有Contetn-Type，還是我們設(shè)置的值，這樣就能正確的返回JSON數(shù)據(jù)給我們使用了。
還有一種方法就是：既然jquery不給我們設(shè)置Content-Type，我們可以自己設(shè)置，如下面的代碼所示，我們在發(fā)送數(shù)據(jù)之前設(shè)置一下Content-Type為“application/json; charset=utf-8”，這樣就可以了。
- 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è)置了jquery的contentType，又發(fā)送了一個空的JSON對象，并且還手工設(shè)置了Content-Type，就如下代碼所示：
- 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就如下圖所示，你會看到Content-Type有兩個用逗號隔開的值，這是為什么呢？因為，jquery為Content-Type設(shè)置了一次值，我們手工又設(shè)置一次，而在IE是多次設(shè)置Content-Type的值它會追加，而不是替換，不過這并不影響WebService正確返回JSON數(shù)據(jù)給我們，不過應(yīng)該避免這種情況出現(xiàn)。
如果說上面那種設(shè)置兩次Content-Type的值還能正確的返回JSON數(shù)據(jù)，那么下面代碼就不能正確返回JSON數(shù)據(jù)了。
- 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也有兩個值，不過這個和上面那個還有點不一樣，這次呢這個值是不一樣的，一個是application/x-www-form-urlencoded，一個是application/json; charset=utf-8，這種情況就不能正確的返回JSON格式的數(shù)據(jù)了。這又是為什么呢？這是因為我們沒有為jquery設(shè)置contentType為，并且又提交了一個空的JSON對象，可以為什么這樣就會使用Content-Type出現(xiàn)這樣的情況的呢？因為jquery的ajax用POST方法提交數(shù)據(jù)的時候，如果沒有設(shè)置contentType，并且所發(fā)送的數(shù)據(jù)不為空，那么它就會為ContentType設(shè)置一個默認(rèn)值，也就是application/x-www-form-urlencoded，所以就會出現(xiàn)這種情況了。
所以呢，在用POST方法請求的時候，如果有提交數(shù)據(jù)，也就是jquery ajax的datar屬性不空的情況下（不為空的情況：1.發(fā)送一個空對象調(diào)用無參數(shù)的WebService方法；2.請一個有參數(shù)的WebService方法。），一定要設(shè)置contentType屬性，并且不能手工設(shè)置Content-Type了。
下面是請求有參數(shù)的WebService方法，一些情況在上面也都說過了，這里就不多說了。
不過有一點要注意，就是用POST方法請求的時候，不用手工去編碼有漢字的參數(shù)值，如下面的data: "{s:'POST有參數(shù)'}"，就不用寫成data: "{s:"+encodeURI('POST有參數(shù)')+"}"了。
- 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);
- }
- });
- }
以上是我們說的用POST方法請求，下面是用GET方法請求。
下面是一個用GET方法請求一個無參數(shù)的WebService方法，不過這是一段錯誤的代碼，錯在哪兒呢，各們童鞋可以自己想一下，我們下面一起說。
- 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);
- }
- });
- }
下圖是用上面一段代碼請求所抓取的Request Headers，大家看一下，問題出在哪里。
下面的代碼是正確的用GET方法調(diào)用無參數(shù)的WebService方法。
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方法。
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ù)和無參數(shù)）調(diào)用WebService方法所抓取的Request Headers。
從上圖可以看到，用GET方法請求，不管是有參數(shù)還是無參數(shù)，都是沒有Content-Length的，所以jquery也就不能為我們設(shè)置Content-Type了，我只能手工設(shè)置Content-Type，所以我們也就沒有必要設(shè)置jquery ajax的contentType了。
需要注意的是，GET方法與POST方法不同，有參數(shù)的時候，如果參數(shù)的值不是ASCII字符，要用encodeURI編一下碼，要不服務(wù)端接收到的數(shù)據(jù)為亂碼。
另：本文為原創(chuàng)，如要轉(zhuǎn)載，請注明出處。
相關(guān)代碼地址：http://download.csdn.net/source/1510113。
【編輯推薦】
