欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-03-04 12:39:23
.net framework 3.5的发布解决了webservice调用中json问题,本文将介绍jquery调用基于.net framework 3.5的webservi...
.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,是因为我没有提交任何数据。

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

这要怎么办呢?继续看下面的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调用WebService返回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调用WebService返回JSON数据及参数设置注意问题

不过,需要注意的是:如果我们设置了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数据给我们,不过应该避免这种情况出现。

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

如果说上面那种设置两次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了。

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

下面是请求有参数的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,大家看一下,问题出在哪里。

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

下面的代码是正确的用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。

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

从上图可以看到,用get方法请求,不管是有参数还是无参数,都是没有content-length的,所以jquery也就不能为我们设置 content-type了,我只能手工设置content-type,所以我们也就没有必要设置jquery ajax的contenttype了。

需要注意的是,get方法与post方法不同,有参数的时候,如果参数的值不是ascii字符,要用encodeuri编一下码,要不服务端接收到的数据为乱码。