jquery调用基于.NET Framework 3.5的WebService返回JSON数据 (转)

最新推荐文章于 2024-11-02 16:51:35 发布
最新推荐文章于 2024-11-02 16:51:35 发布
阅读量81 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/johnwonder/archive/2010/12/21/1912857.html
版权
jquery调用WebService网上的介绍也比较多，最近的项目中我也用到不少，一直都很少用.net ajax，比较钟情于jquery，调用请求WebService有几种方法，这主要说一下POST与GET方法，其实安全方法考虑不建议使用GET方 法，下面就说一下用jquery调用WebService的参数设置及设置不当所出现的问题，还有出现问题的原因。我们这里只讨论返回JSON格式数据的 情况，相信大家都比较了解JSON格式的数据对于ajax的方便，不了解的童鞋可以从网上找一下这方面的资料来看一下，这里就不多说了，或者我以后再写一 篇这方面的文章。

下面是WebService服务器端代码：

WS1和WS2方法为POST方法请求的方法，所以设置UseHttpGet 为false，WS3与WS4为GET方法请求的方法，设置UseHttpGet 为true。

using System.Web.Script.Services;
using System.Web.Services;
namespace WebService35
{
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[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 WebService1 : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(UseHttpGet = false)]
public string WS1()
{
return "POST无参数";
}
[WebMethod]
[ScriptMethod(UseHttpGet = false)]
public string WS2(string s)
{
return s;
}
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public string WS3()
{
return "GET无参数";
}
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public string WS4(string s)
{
return s;
}
}
}

function fun1() {
$.ajax({
url: "WebService1.asmx/WS1",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "",
success: function(json) {
alert(json.d);
},
error: function(x, e) {
alert(x.responseText);
},
complete: function(x) {
alert(x.responseText);
}
});
}

上面的JS方法为用POST方法请求无参数的WebService方法的代码，不过以上代码并不能返回正确的JSON格式 的数据，而是返回XML格 式的数据，回为要使WebService返回JSON格式的数据，要在Request Headers中设置Content-Type为application/json，有人要问了，你不设置了contentType为 “application/json; charset=utf-8”了吗？没错，是设置了，不过在jquery中，如果Content-Length为0或者没有设置，它会忽略你设置的 contentType的，我可以看下面的这个图，这是抓取的Request Headers的数据，可以看到Content-Length为0，并且没有Content-Type，所WebService就不知道我们需要JSON 格式的数据，它就返回了默认的XML格式的数据给我们，之所以为0，是因为我没有提交任何数据。

这要怎么办呢？继续看下面的JS代码，因为我们这里是调用的一个没能参数的WebService方法，所以我们可以提交一个空和JSON对象“{}"，如下所示，设置data为{}。

function fun1() {
$.ajax({
url: "WebService1.asmx/WS1",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{}",
success: function(json) {
alert(json.d);
},
error: function(x, e) {
alert(x.responseText);
},
complete: function(x) {
alert(x.responseText);
}
});
}

现在我再来看下图，可以看到，Content-Length已经为2了，并且也有Contetn-Type，还是我们设置的值，这样就能正确的返回JSON格式的数据给我们使用了。

还有一种方法就是：既然jquery不给我们设置Content-Type，我们可以自己设置，如下面的代码所示，我们在发送数据之前设置一下Content-Type为“application/json; charset=utf-8”，这样就可以了。

function fun1() {
$.ajax({
url: "WebService1.asmx/WS1",
type: "POST",
dataType: "json",
data: "",
beforeSend: function(x) {
x.setRequestHeader("Content-Type", "application/json; charset=utf-8");
},
success: function(json) {
alert(json.d);
},
error: function(x, e) {
alert(x.responseText);
},
complete: function(x) {
alert(x.responseText);
}
});
}

下面是我们手工设置了Content-Type之后抓取的Request Headers，可以看到，即使Content-Length为0，里面也有了正确的Content-Type了。

不过，需要注意的是：如果我们设置了jquery的contentType，又发送了一个空的JSON对象，并且还手工设置了Content-Type，就如下代码所示：

function fun1() {
$.ajax({
url: "WebService1.asmx/WS1",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{}",
beforeSend: function(x) {
x.setRequestHeader("Content-Type", "application/json; charset=utf-8");
},
success: function(json) {
alert(json.d);
},
error: function(x, e) {
alert(x.responseText);
},
complete: function(x) {
alert(x.responseText);
}
});
}

那么在IE发送的Requst Headers就如下图所示，你会看到Content-Type有两个用逗号隔开的值，这是为什么呢？因为，jquery为Content-Type设置 了一次值，我们手工又设置一次，而在IE是多次设置Content-Type的值它会追加，而不是替换，不过这并不影响WebService返回正确的 JSON格式的数据给我们，不过应该避免这种情况出现。

如果说上面那种设置两次Content-Type的值还能正确的返回JSON格式的数据，那么下面代码就不能正确返回数据了。

function fun1() {
$.ajax({
url: "WebService1.asmx/WS1",
type: "POST",
dataType: "json",
data: "{}",
beforeSend: function(x) {
x.setRequestHeader("Content-Type", "application/json; charset=utf-8");
},
success: function(json) {
alert(json.d);
},
error: function(x, e) {
alert(x.responseText);
},
complete: function(x) {
alert(x.responseText);
}
});
}

从下图可以看到Content-Type也有两个值，不过这个和上面那个还有点不一样，这次呢这个值是不一样的，一个是 application/x-www-form-urlencoded，一个是application/json; charset=utf-8，这种情况就不能正确的返回JSON格式的数据了。这又是为什么呢？这是因为我们没有为jquery设置 contentType为，并且又提交了一个空的JSON对象，可以为什么这样就会使用Content-Type出现这样的情况的呢？因为jquery的 ajax用POST方法提交数据的时候，如果没有设置contentType，并且所发送的数据不为空，那么它就会为ContentType设置一个默认 值，也就是application/x-www-form-urlencoded，所以就会出现这种情况了。

所以呢，在用POST方法请求的时候，如果有提交数据，也就是jquery ajax的datar属性不空的情况下（不为空的情况：1.发送一个空对象调用无参数的WebService方法；2.请一个有参数的 WebService方法。），一定要设置contentType属性，并且不能手工设置Content-Type了。

下面是请求有参数的WebService方法，一些情况在上面也都说过了，这里就不多说了。

不过有一点要注意，就是用POST方法请求的时候，不用手工去编码有汉字的参数值，如下面的data: "{s:'POST有参数'}"，就不用写成data: "{s:"+encodeURI('POST有参数')+"}"了。

function fun2() {
$.ajax({
url: "WebService1.asmx/WS2",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
data: "{s:'POST有参数'}",
success: function(json) {
alert(json.d);
},
error: function(x, e) {
alert(x.responseText); ;
},
complete: function(x) {
alert(x.responseText);
}
});
}

以上是我们说的用POST方法请求，下面是用GET方法请求。

下面是一个用GET方法请求一个无参数的WebService方法，不过这是一段错误的代码，错在哪儿呢，各们童鞋可以自己想一下，我们下面一起说。

function fun3() {
$.ajax({
url: "WebService1.asmx/WS3",
type: "GET",
dataType: "json",
data: "",
contentType: "application/json; charset=utf-8",
success: function(json) {
alert(json.d);
},
error: function(x, e) {
alert(x.responseText);
},
complete: function(x) {
alert(x.responseText);
}
});
}

下图是用上面一段代码请求所抓取的Request Headers，大家看一下，问题出在哪里。

下面的代码是正确的用GET方法调用无参数的WebService方法。

function fun3() {
$.ajax({
url: "WebService1.asmx/WS3",
dataType: "json",
data: "",
beforeSend: function(x) {
x.setRequestHeader("Content-Type", "application/json; charset=utf-8");
},
success: function(json) {
alert(json.d);
},
error: function(x, e) {
alert(x.responseText);
},
complete: function(x) {
alert(x.responseText);
}
});
}

下面的代码是正确的用GET方法调用有参数的WebService方法。

function fun4() {
$.ajax({
url: "WebService1.asmx/WS4",
dataType: "json",
data: encodeURI("s='GET有参数'"),
beforeSend: function(x) {
x.setRequestHeader("Content-Type", "application/json; charset=utf-8");
},
success: function(json) {
alert(json.d);
},
error: function(x, e) {
alert(x.responseText);
},
complete: function(x) {
alert(x.responseText);
}
});
}

下图是正确的用GET方法(有参数和无参数）调用WebService方法所抓取的Request Headers。

从上图可以看到，用GET方法请求，不管是有参数还是无参数，都是没有Content-Length的，所以jquery 也就不能为我们设置 Content-Type了，我只能手工设置Content-Type，所以我们也就没有必要设置jquery ajax的contentType了。

需要注意的是，GET方法与POST方法不同，有参数的时候，如果参数的值不是ASCII字符，要用encodeURI编一下码，要不服务端接收到的数据为乱码。

http://apps.hi.baidu.com/share/detail/8034461
 

转载于:https://www.cnblogs.com/johnwonder/archive/2010/12/21/1912857.html

weixin_30822451
关注
jquery调用基于.NET Framework 3.5的WebService返回JSON数据
07-22
jquery调用基于.NET Framework 3.5的WebService返回JSON数据
Windows Server 2012上安装.NET Framework 3.5
ajax_yan的博客
12-04 1428
安装方式    https://blog.csdn.net/sunny_lv/article/details/73603360     需要下载netframework3.5，最好是对应Server 2012 镜像中的 sxs  （百度网盘有）  
jQuery调用WebService返回JSON数据及参数设置注意问题
01-02
.NET Framework 3.5的发布解决了WebService调用中json问题，本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据，另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题，还有...
asp.net webservice返回json的方法
10-26
为了返回JSON，我们需要利用.NET Framework提供的JSON序列化工具或第三方库，例如Newtonsoft.Json（Json.NET）。 以下是一个简单的示例，展示如何将ASP.NET Web Service配置为返回JSON： 1. **引入Json.NET**：...
在 VS Code 中规范化 Git 提交消息并自动生成 CHANGELOG.md
浊世独行侠
11-02 156
在 VS Code 中规范化 Git 提交消息并自动生成 CHANGELOG.md
Day21包和模块
weixin_50199478的博客
10-30 587
一个.py文件就是一个模块。模块是含有一系列数据、函数、类等的程序。包是将模块以文件夹的组织形式进行分组管理的方法，以便更好地组织和管理相关模块。包是一个包含一个特殊的__init__.py文件的目录。
JAVA 插入 JSON 对象到 PostgreSQL
qq_52143611的博客
10-30 814
在现代软件开发中，由于 JSON 数据的轻量和通用性，处理 JSON 数据已经变得无处不在。PostgreSQL凭借其对 JSON 的强大支持，为存储和查询 JSON 数据提供了出色的平台。为了将JSON数据保存到PostgreSQL数据库中，我们可以将JSON数据转换为PostgreSQL的JSONB类型数据，然后将其存储在数据库中。在Java中，我们可以使用JDBC或者基于ORM框架的方式来实现这一功能。
快速创建一个微信小程序，详细步骤以及示范程序代码
elirlove1的博客
10-25 3336
创建一个微信小程序涉及前端和后端的搭建与联调。以下是一个快速创建微信小程序的详细步骤以及示范程序代码。
Redis中储存含LocalDateTime属性对象的序列化实现
Charles_Clark的博客
10-29 659
上面代码中配置 RedisTemplate 的序列化机制，以便能够序列化和反序列化包含 LocalDateTime 等 Java 8 时间类型的对象。•作用ObjectMapper 是 Jackson 库的核心类，用来将 Java 对象转换为 JSON 字符串，或者将 JSON 字符串解析为 Java 对象。Jackson 是一个非常流行的 JSON 序列化和反序列化库，ObjectMapper 是它的主要接口，用于处理复杂的对象和数据结构。•作用。
此版本的IDM不支持该类下载，请尝试将IDM更新至最新版本
10-29 535
平时可以正常使用，谷歌浏览器内用IDM下载突然提示不能用了，但是复制链接到IDM中新建任务不影响使用，推测可能和谷歌浏览器更新有关，打开谷歌浏览器的扩展工具，移除IDM Integration Module。然后打开IDM安装目录，找到IDMGCExt.crx，直接拖拽到浏览器扩展工具界面，再去下载就不会提示版本不支持了。原因 在于禁用扩展自动更新，扩展和软件版本要一致此版本的IDM不支持该类下载，请尝试将IDM更新至最新版本​​​​​​​
JavaScript常用库
qq_45817631的博客
10-29 644
该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次。调用时会传入一个参数，表示函数执行的时间戳，单位为毫秒。JSON对象用于序列化对象、数组、数值、字符串、布尔值和null。每隔delay毫秒，执行一次函数func()。每隔delay毫秒，执行一次函数func()。当存在多个相同类型的事件出发函数时，可以通过。可以通过选择器取绑定html中的标签。第一次在第delay毫秒后执行。第一次在第delay毫秒后执行。与服务器建立全双工连接。在事件触发的函数中的。：阻止事件的默认行为。
GIN 反向代理功能
程序媛平平无奇的一天
11-01 416
此设置非常适合需要将请求动态代理到不同后端服务器的场景，同时处理跨域请求并确保并发访问的安全性。
编写高性能爬虫抓取股票行情数据
曹旭升（sheng.c） 的博客
10-31 486
最近给一个私募大佬帮忙做了一些股票交易有关的系统，其中涉及到行情数据抓取的问题，一番摸索之后，把成果在这里做个分享。我把行情抓取的部分，和一个写手记的小功能，单独拿了出来放在一个小系统里面，可以免费使用
JavaScript 实现对 JSON 对象数组数据进行分页处理
前端开发
10-30 284
JavaScript 实现对 JSON 对象数组数据进行分页处理
electron + vue 打包完成后，运行提示 electrion-updater 不存在
最新发布
qq_40602449的博客
11-02 108
electron + vue 打包完成后，运行提示 electrion-updater 不存在 检查配置： electrion-updater 放在 dependencies 下 你的项目 package.json 与 electron 的 package.json 是否共用同一个，如果不是， electrion-updater 放在 electron 配置 dependencies 下
axios post请求body为字符串时的解决方法
人与人之间最小的差别是智商，最大的差别是坚持。
10-29 260
修改Content-Type为text类型。关键就是修改Content-Type。text/html ： HTML格式。text/plain ：纯文本格式。text/xml ： XML格式。这里修改为text/plain。
（三）Javascript
mzz715的博客
10-29 431
JavaScript(简称：JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互JavaScript 和Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
jQuery调用.NET 3.5 WebService返回JSON数据详解
"jQuery调用WebService返回JSON数据及参数设置注意问题" 在开发Web应用程序时，JavaScript库jQuery提供了方便的方式来调用远程服务，如.NET Framework 3.5中的WebService。这篇文章聚焦于如何使用jQuery获取和处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值