ASP.net jQuery调用webservice返回json数据的一些问题

时间：2023-03-08 21:22:51

之前寒假时，试着使用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

转载请保留出处。

相关文章