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

Posted 阿轩的BLOG

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

转载请保留出处。

以上是关于ASP.net jQuery调用webservice返回json数据的一些问题的主要内容,如果未能解决你的问题,请参考以下文章

在 IIS Express 或其他 WebServer 上部署 ASP.NET MVC 应用程序?

如何使用 jQuery 调用 ASP.NET Web 服务?

使用 JQuery $.AJAX 调用调用 ASP.NET 函数

Jquery Ajax调用asp.net后台方法

通过 jQuery 调用 ASP.NET 服务器端方法

使用 jQuery 调用 ASP.NET PageMethod/WebMethod - 返回整个页面