ASP.net jQuery調用webservice返回json資料的一些問題

標籤：不能   資料   ebs   取消   ajax   原因   過程   調用   pts   

之前寒假時，試著使用jQuery寫了幾個非同步請求demo，

但是那樣是使用的webform普通頁面，一般應該是用 webservice 居多。

最近寫後台管理時，想用非同步來實現一些資訊的展示和修改，

這是第一次真正的在實際中運用ajax，卡了一個小時才做好簡單的資訊展示。

在這之間遇到了兩個問題。寫下來分享給大家，也加深一下自己的印象。

有錯誤的地方還請大神指出。

 

前端js代碼：

 1     <script type="text/javascript"> 2         $(function () { 3             $("#details").hide(); 4             $(".details").click(function () { 5                 showdetails($(this).attr("id")); 6             }); 7         }) 8  9         function showdetails(id) {10             $.ajax({11                 url: "article.asmx/GetArticleByID",12                 type: "POST",13                 datatype: "json",14                 data:‘{ id: ‘ + id + ‘ }‘,15                 contentType: "application/json; charset=utf-8",16                 success: function (data) {17                     var json = null;18                     try {19                         json = eval(‘(‘ + data.d + ‘)‘);20                     }21                     catch (e) {22                         alert(e.message);23                     }24                     $("#id").text(json.ID);25                     $("#title").text(json.Title);26                     $("#time").text(json.Time);27                     $("#text").text(json.Text);28                     $("#details").show();29                 }30             });31     </script>

前端html代碼

 1 //點擊的地方 2 <td><a class="details" id="<% =Convert.ToInt32(article.ID) %>">詳細</a></td> 3  4 //插入資訊的地方 5     <div id="details"> 6         <table> 7             <tr> 8                 <td id="id"></td> 9                 <td id="title"></td>10                 <td id="time"></td>11                 <td id="text"></td>12             </tr>13         </table>14     </div>

 

webservice 代碼

 1     [WebService(Namespace = "http://tempuri.org/")] 2     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 3     [System.ComponentModel.ToolboxItem(false)] 4     // 若要允許使用 ASP.NET AJAX 從指令碼中調用此 Web 服務，請取消注釋以下行。  5     [System.Web.Script.Services.ScriptService] 6     public class article : System.Web.Services.WebService 7     { 8  9         [WebMethod]10         public string GetArticleByID(int id)11         {12             ArticleBLL article = new ArticleBLL();13             article = ArticleBLL.GetArticleByID(id);14 15             //string s = string.Empty;16             //s = "{\"id\":\""+article.ID+"\",\"title\":\""+article.Title+"\",\"text\":\""+article.Text+"\",\"time\":\""+article.Time+"\"}";17             //return s;18 19             JavaScriptSerializer js = new JavaScriptSerializer();20             return js.Serialize(article);21 22             //Context.Response.Write(s);23             //Context.Response.End();24         }25     }

 

遇到的第一個問題是，傳遞資訊時的500報錯，發現是data格式的問題，

加上contentType: "application/json; charset=utf-8"才會報的錯，

這個語句告訴伺服器我們傳遞過去的是json格式資訊，所以解析不了的時候就會返回錯誤資訊。

data要寫成

data: ‘{ id: ‘ + id + ‘ }‘

data 必須是一個“表示JSON對象的字串”，而不是一個“JSON”對象

原因是jquery會把JSON對象序列化成標準POST的形式，你此處的{ id: id }會變成形好id=3這樣的形式，而ASP.NET WebService需要的是JSON格式的資料，所以必須把你的資料變成一個JSON樣子的字串。

 

第二個問題是請求成功看返回資料格式也對，但是顯示不出來。

預設返回的資料是xml格式，這裡我使用了 JavaScriptSerializer js = new JavaScriptSerializer(); return js.Serialize(article); 來返回json格式資訊。

最後被注釋掉的代碼是在網上看到的，是輸出純文字，可以被瀏覽器識別，但我沒有測試，應該是可以的。

 

原來是需要解析一下，這個過程叫做還原序列化。

我們只需要在 success 回呼函數中 eval 下 jquery 通過擷取 webservice 得到的返回字串的 d 屬性，就可以擷取到實際的json對象了。

如下，如果方法返回的是 {"d":"{\"Title\":\"文章標題\"}"} 這種資訊，我們如何擷取到msg這個屬性的值呢？

首先一定要明確的時，調用webservice的方法後實際擷取到的json格式的字串是這樣的 {"d":"{\"Title\":\"文章標題\"}"} ，

jquery通過這個字串產生的json對象只有一個屬性，那就是d，d儲存的是webservice方法返回的json格式的字串資訊，而不是 json 對象，

所以不能通過 data.d.ID來擷取ID資訊。而是需要 var json=eval(‘(‘+data.d+‘)‘)來產生實際的json對象，然後 josn.ID 才是需要的資訊。

 

其實還可以直接解析xml資料，但要比json麻煩一點

http://www.cnblogs.com/qiantuwuliang/archive/2009/11/23/1609117.html

這篇文章就寫了如何解析xml資料。

 

參考 http://www.cnblogs.com/tianguook/archive/2010/12/04/1896485.html

轉載請保留出處。

ASP.net jQuery調用webservice返回json資料的一些問題