您的位置：首页 > 编程技术 > ASP.NET  >  jQuery调用WebService返回JSON数据及参数设置注意问题

jQuery调用WebService返回JSON数据及参数设置注意问题

 更新时间：2021年9月22日 10:17  点击：1494
.NET Framework 3.5的发布解决了WebService调用中json问题，本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据，另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题，还有出现问题的原因

jQuery调用WebService网上的介绍也比较多，最近的项目中我也用到不少，一直都很少用.NET Ajax，比较钟情于jQuery调用请求WebService有几种方法，这主要说一下POST与GET方法，其实安全方法考虑不建议使用GET方法，下面就说一下用jquery调用WebService的参数设置及设置不当所出现的问题，还有出现问题的原因。我们这里只讨论返回JSON数据的情况，相信大家都比较了解JSON格式的数据对于ajax的方便，不了解的可以从网上找一下这方面的资料来看一下，这里就不多说了，或者我以后再写一篇这方面的文章。

下面是jQuery调用WebService服务器端代码：

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

复制代码 代码如下:

using System.Web.Script.Services;
using System.Web.Services;
namespace WebService35
{
///
/// WebService1 的摘要说明
///
[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数据给我们使用了。

返回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了。

设置了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数据给我们，不过应该避免这种情况出现。

IE发送的Requst Headers

如果说上面那种设置两次Content-Type的值还能正确的返回JSON数据，那么下面代码就不能正确返回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了。

手工设置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，大家看一下，问题出在哪里。

请求所抓取的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方法

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

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

[!--infotagslink--]

相关文章

  • c# 三种方法调用WebService接口

    这篇文章主要介绍了c# 三种方法调用WebService接口的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-07

  • php把读取xml 文档并转换成json数据代码

    在php中解析xml文档用专门的函数domdocument来处理，把json在php中也有相关的处理函数，我们要把数据xml 数据存到一个数据再用json_encode直接换成json数据就OK了。...2016-11-25

  • c#动态调用Webservice的两种方法实例

    这篇文章介绍了c#动态调用Webservice的两种方法实例，有需要的朋友可以参考一下...2020-06-25

  • c#中WebService的介绍及调用方式小结

    这篇文章主要给大家介绍了关于c#中的WebService及其调用方式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25

  • 浅谈PHP调用Webservice思路及源码分享

    方法一：直接调用复制代码 代码如下:<? /******************************************************************************/ /* 文件名 : soapclient.php /* 说 明 : WebService接口客户端例程 /****************...2014-06-07

  • C# 创建、部署和调用WebService简单示例

    这篇文章主要为大家详细介绍了C# 创建、部署和调用WebService的简单示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • C# Soap调用WebService的实例

    下面小编就为大家带来一篇C# Soap调WebService的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25

  • c#动态改变webservice的url访问地址

    这篇文章主要介绍了c#动态改变webservice的url访问地址,需要的朋友可以参考下...2020-06-25

  • WebService 的简单封装接口调用方法

    这篇文章主要介绍了WebService 的简单封装接口调用方法，主要是通过简单的sql语句来查询数据库，从而返回dataset,十分简单实用，有需要的小伙伴可以参考下。...2020-06-25

  • JAVA调用SAP WEBSERVICE服务实现流程图解

    这篇文章主要介绍了JAVA调用SAP WEBSERVICE服务实现流程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-11

  • c#编写webservice服务引用实例分享

    c#编写webservice服务引用实例分享,大家参考使用吧...2020-06-25

  • C#调用和实现WebService，纯手工打造！

    C#调用和实现WebService，纯手工打造！ 需要的朋友可以参考一下...2020-06-25

  • C#创建、部署、调用WebService图文实例详解

    本文主要用详细的图文给大家介绍C#创建、部署、调用WebService的全部过程以及中间需要避免的问题。...2020-06-25

  • 动态webservice调用接口并读取解析返回结果

    webservice的 发布一般都是使用WSDL（web service descriptive language）文件的样式来发布的，在WSDL文件里面，包含这个webservice暴露在外面可供使用的接口。今天我们来详细讨论下如何动态调用以及读取解析返回结果...2020-06-25

  • ASP.NET中Webservice安全 实现访问权限控制

    本文主要讲解ASP.NET中的Webservice的安全设置两种方法，一种基于soapheader，一种基于SoapExtensionAttribute，需要的朋友可以参考下。...2021-09-22

  • 通过jsonp获取json数据实现AJAX跨域请求

    JSON 可通过 JavaScript 进行解析，JSON 数据可使用 AJAX 进行传输，这篇文章主要介绍了通过jsonp获取json数据（实现AJAX跨域请求），有兴趣的可以了解一下。...2017-01-26

  • asp.net webservice返回json的方法

    webservice默认的返回为XML 要返回json可以用json工具类把对象转为json字符串,需要的朋友可以参考下...2021-09-22

  • php返回json数据函数例子

    json_encode()函数是一个在php中可以把数组转换成json格式的函数了，但json_encode函数对于英文是没有任何问题，如果碰到中文或编码有不致情况时会出现中文转换之后变空...2016-11-25

  • php 通过curl post发送json数据实例

    利用php curl发送json数据与curl post其它数据是一样的，下面我来给大家总结几个关于curl post发送json数据实例，希望能加深各位对curl post json数据的理解吧。 例...2016-11-25

  • 解决yii webservice 提示：Procedure 'getSent' not present 错误

    本文章为各位介绍解决yii webservice 提示：Procedure 'getSent' not present 错误方法，有兴趣的和小编一起看看。 其实根据常用的webservice清除缓存方法，在client端...2016-09-20