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

之前寒假時，試着使用jQuery寫了幾個異步請求demo，

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

最近寫后台管理時，想用異步來實現一些信息的展示和修改，

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

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

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

 

前端js代碼：

    <script type="text/javascript">
        $(function () {
            $("#details").hide();
            $(".details").click(function () {
                showdetails($(this).attr("id"));
            });
        })

        function showdetails(id) {
            $.ajax({
                url: "article.asmx/GetArticleByID",
                type: "POST",
                datatype: "json",
                data:'{ id: ' + id + ' }',
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var json = null;
                    try {
                        json = eval('(' + data.d + ')');
                    }
                    catch (e) {
                        alert(e.message);
                    }
                    $("#id").text(json.ID);
                    $("#title").text(json.Title);
                    $("#time").text(json.Time);
                    $("#text").text(json.Text);
                    $("#details").show();
                }
            });
    </script>

前端html代碼

//點擊的地方
<td><a class="details" id="<% =Convert.ToInt32(article.ID) %>">詳細</a></td>

//插入信息的地方
    <div id="details">
        <table>
            <tr>
                <td id="id"></td>
                <td id="title"></td>
                <td id="time"></td>
                <td id="text"></td>
            </tr>
        </table>
    </div>

 

webservice 代碼

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消注釋以下行。 
    [System.Web.Script.Services.ScriptService]
    public class article : System.Web.Services.WebService
    {

        [WebMethod]
        public string GetArticleByID(int id)
        {
            ArticleBLL article = new ArticleBLL();
            article = ArticleBLL.GetArticleByID(id);

            //string s = string.Empty;
            //s = "{\"id\":\""+article.ID+"\",\"title\":\""+article.Title+"\",\"text\":\""+article.Text+"\",\"time\":\""+article.Time+"\"}";
            //return s;

            JavaScriptSerializer js = new JavaScriptSerializer();
            return js.Serialize(article);

            //Context.Response.Write(s);
            //Context.Response.End();
        }
    }

 

遇到的第一個問題是，傳遞信息時的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

轉載請保留出處。