首页 > 代码库 > ASP.net jQuery调用webservice返回json数据的一些问题
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数据的一些问题