ASP.net jQuery調用webservice返回json數據的一些問題

之前寒假時，試著使用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

轉載請保留出處。