正文

asp.netjquery调用webservice返回json数据的一些问题

阿轩的BLOG  2022-02-09  454

关键词：

之前寒假时，试着使用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，禁用表单提交按钮不调用 httpPost 操作

】ASP.NETJQuery，禁用表单提交按钮不调用httpPost操作【英文标题】：ASP.NETJQuery,disabledabuttononformsubmitnotcallhttpPostaction【发布时间】：2021-12-0908:45:33【问题描述】：我在一个ASP.NETMVC应用程序中工作，我想在表单的OnSubmit事件期间禁用... 查看详情

Asp.Net jQuery $.getJSON 有时会导致整页回发？

】Asp.NetjQuery$.getJSON有时会导致整页回发？【英文标题】：Asp.NetjQuery$.getJSONsometimescausesfullpagepostback?【发布时间】：2010-09-1820:55:14【问题描述】：我正在编写一个ASP.NET网络表单应用程序，并且我正在使用jQuery进行AJAX调用。这运行... 查看详情

ASP.NET jQuery 错误：未知的 Web 方法

】ASP.NETjQuery错误：未知的Web方法【英文标题】：ASP.NETjQueryerror:UnknownWebMethod【发布时间】：2010-09-1520:21:11【问题描述】：这是我第一次尝试从jQuery调用ASP.NET页面方法。我在responseText消息中收到状态500错误，提示找不到Web方法。... 查看详情

ASP.NET jQuery 问题

】ASP.NETjQuery问题【英文标题】：ASP.NETjQueryissue【发布时间】：2010-12-2019:03:10【问题描述】：我正在用jQuery挖掘一些与工作相关的东西，并且我试图让特定的事件流正常工作，但我似乎无法理解。我了解jQuery如何在前端运行，如... 查看详情

ASP.Net jquery 文本框事件

】ASP.Netjquery文本框事件【英文标题】：ASP.NetjqueryTextBoxEvent【发布时间】：2021-11-0317:27:33【问题描述】：我可以在asp.net中使用jquery将文本框更改事件称为文本更改吗？所以，我希望在用户输入数字时完成操作。Default.aspx<asp:Text... 查看详情

用nodejs调用webservice

用nodejs调用webservice，是用soap包实现的.步骤如下：第一步：安装soap包npm installsoap第二部：调用webservicevarsoap=require(‘soap‘);varurl=‘http://webservice.webxml.com.cn/WebServices/MobileCodeWS.asmx?wsdl‘;varargs={mobileCo 查看详情

webservice接口第二次调用接口不通

...您问的是怎么办的话，使用android的HttpURLConnection直接调用webservice接口。Webservice.GetVcardByUserNo这个是封装了的webservice接口，ksoap2在解析第二次调用返回的结果时抛异常，使用android的HttpURLConnection直接调用webservice接口，直接使用时... 查看详情

Nodejs调用webservice [关闭]

】Nodejs调用webservice[关闭]【英文标题】：Nodejstocallwebservice[closed]【发布时间】：2014-04-2703:00:12【问题描述】：如何使用node.js调用webservice。是否可以使用node.js调用webservice。如果有人知道这个解释示例程序和如何从web服务返回值... 查看详情

如何调用webservice

...解决方案下两个项目，其中项目A是个WebSite，项目B是一个WebService，想在A中通过MicrosoftAjax.js创建代理类，用javascript调用B中的webservice，可是一直报错；theservermethod“HelloWorld”failed；这个该怎么办，详细，详细，再详细，新手求... 查看详情

c#使用httppost请求调用webservice(转)(代码片段)

转自 https://www.cnblogs.com/Brambling/p/7266482.html之前调用WebService都是直接添加服务引用，然后调用WebService方法的，最近发现还可以使用Http请求调用WebService。这里还想说一句，还是webapi的调用简单。WebService服务端代码：　　publicc... 查看详情

如何调用别人提供的webservice接口

参考技术A1、调用WebService的Client端采用jax-ws调用WebService；流程：1）建立JavaProject；2）建立WebServiceClient：(1)OtherèMyEclipseèWebServicesèWebServiceClient；(2)“Strategy”只能选jax-ws（不能选XFire）；(3)选用WSDLURL；（（3）（4）两步表示只能... 查看详情

不添加引用，动态调用webservice

这两天给公司写一个调用接口的程序，接口采用WebService！本打算将这个工具写成通用的，但是微软给出的调用WebService的方法必须添加该WebService引用,这样的方式不免太过于死板，无法动态调用，于是在网上查了很多相... 查看详情

添加webservice调用日志

　　之前想用spring的AOP给webservice添加切面的，但是使用around切面后，居然调用端得不到webservice的返回结果，而且报文的详细情况也不得而知，很是尴尬，所以偷了个懒。但是该做的还是要做，不要以后要求查看调用日志的时候... 查看详情

webservice008——第四种方式调用，通过service调用

该方式使用较少结合《webservice007——wsdl说明书的阅读》和《webservice005——查询电话号码归属地信息》查看详情

silverlight调用webservice传递json接收绑定数据

1、接收数据：WebService通过接口接收数据。类型为object2、类型转换：通过json转换方法将object转换为json格式数据3、调用WebService方法：silverlight调用WebService方法，接收json数据4、转换数据：silverlight引用Newtonsoft.Json.Silverlight.dll文件... 查看详情

asp.netjs调用webservice——简单例子

一、创建好WebService 二、编辑页面与js 三、运行页面并点击按钮，结果如下简单调用吧！查看详情

webservice学习之一：webservice原理

一、定义WebService不是框架也不是技术而是解决远程调用、跨平台调用、跨语言调用问题的一种规范。二、应用1、同一个公司新、旧系统的整合：比如CRM系统与OA、客服系统相互调用2、不同公司的业务组合：比如淘宝与物流公司... 查看详情

如何在c#中webservice调用方法总结

　一、WebService在cs后台程序中的调用　　A、通过命名空间和类名直接调用　　示例：　　WebServicews=newWebService();　　strings=ws.HelloWorld();　　B、通过添加WEB引用的方式调用，首先添加WEB引用，通过URL指向WEBSERVICE，　　指定WEB引用... 查看详情