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

1、jquery调用webservice返回json数据及参数设置注意问题.net framework 3.5的发布解决了 webservice调用中json问题，本文将介绍jquery调用基 于.net framework 3.5的webservice返冋json数据,感兴趣的朋友可以了解下，希望本文対 你有所帮助.net framework 3.5的发布解决了 webservice调用中json问题,本文将介绍jquery调用基t.net framew ork 3.5的webservice返回json数据，另外还要介绍一下用jquery调用webservice的参数设置及设置不 当所出现的问题

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

3、service服务器端代码：ws1和ws2方法为post方法请求的方法，所以设置usehttpget为false, ws3与ws4为get方法请求的 方法，设置 usehttpget 为 true。复制代码代码如卞：using system.web.script.services;using system.web.services;namespace webservice35ill webservicel的摘耍说明iiiwebservice(namespace =")webservicebinding(conformsto = wsiprofiles.basicprofilel_l)

4、system.comp on entmodel.toolboxltem(false)/若耍允许使用asp.net ajax从脚木川调用此web服务，请取消对下行的注释。system.web.script.services.scriptservicepublic class webservicel : system.web.services.webservicewebmethodscriptmethodfusehttpget = false)public string ws1()return "post 无参数”;webmethodscriptmethodfusehttpget = f

5、alse)public string ws2(string s)return s;webmethodscriptmethodfusehttpget = true)public string ws3()return “get 无参数”；webmethodscriptmethodfusehttpget = true)public string ws4(string s)return s;复制代码代码如下：function funl() $.ajax(url: ,webservicel.asmx/wsl,/type: "post",datatype: njsorf：content

6、type: “ charset=utf-8nzdata:success: function(json) alertfjs on.d);,error: function(x, e) alert(x.resp on setext);lcomplete: function(x) alert(x.resp on setext););上面的js方法为用post方法请求无参数的webservice方法的代码，不过以上代码并不能返回正确的jso n格式的数据,而是返回xml格式的数据，回为要使webservice返回json格式的数据,要在request he aders 屮设置 content-type

7、为 application/json,有人要问 了,你不设置 了 contenttype 为 "application/json;charset=utf-8m 了吗？没错,是设置了，不过在jquery中,如果content-length为0或者没有设置,它会忽 略你设置的contenttype的，我可以看下而的这个图，这是抓取的request headers的数据，可以看到con tent-length为0,并口没有content-type,所webservice就不知道我们需要json格式的数据，它就返回了 默认的xml格式的数据给我们，之所以为6是因为我没有提交任何数据。曰cac

8、hel pragma: no-cache日clientaccept: application/jsonz text/javascriptr 十 h accept-encoding: gzipr deflate k accept-language: zh<nuser-agent: mozilla/4.0 (compatible; msie 7.0;'b- entity- content-length: 0b- miscellaneousk referer: http:/king/ws/default. aspx- x-requested-v'ith: xmlhttprequ

9、esttransport脚本之家； connection: keep-alive ihost: king这耍怎么办呢？继续看下團的js代码.因为我们这里是调用的一个没能参数的webservice方法，所以我们可以提交一个空和json对象如下所示，设置data为。复制代码代码如下：function funl() $.ajax(url: nwebservicel.asmx/wsl,/type: ,post,/datatype: njson'：contenttype: happlication/json; charset=utf-8h,data: "f,success: funct

10、ion(json) alert(json.d);,error: function(x” e) alertfx.resp on setext);,complete: function(x) alertfx.resp on setext););现在我再来看下图，可以看到，content-length已经为2 了，并且也有contetn-type,还是我们设置的值,这样就能正确的返回json数据给我们使用了。request headenspost /ws/webservicel. asaa/wsl ht7f 1. 1-cache l- pragma: no<ache白 client” acce

11、pt: appliestion/json, text/javascriptz 十h accept-encoding: gzipf deflatep- accept-language： zh<nl- user-agent: mozilla/4.0 (compatible; msie 7.0; windows i 白 entity” con ten t-length: 2l- content/type: application/json; charset=utf-80- miscellaneous” referer: http:/king/ws/default.aspxl- x-reques

12、tedith: xmlhttprequests transport| connection: keep-alive host: king脚本之家uiww.obs1.net还有一种方法就是：既然jquery不给我们设置content-type,我们可以自己设置，如下血的代码所示，我们在发送数据z前设置一卜 content-type 为 4<application/json; charset=utf-8m,这样就"j以了。复制代码代码如下：function funl() $.ajax(url: ,webservicel.asmx/wsln/type: “post蔦datatype:

13、 mjson1：data: m,zbeforesend: function(x) x.setrequestheader(ncontent-type'1, happlicatiorvjson; charset=utf-8h);lsuccess: function(json) alert(js on.d);lerror: function(x# e) alert(x.resp on setext);,complete: function(x) alert(x.resp on setext););卜面是我们手工设置了 content-type z后抓取的request headers,可以看

14、到，即使content-length为0,里而也有了正确的content-type 了。request headers/ws/webservicel1http/1. 1曰cachepragma: no -cache白 client accept: application/json，text/javascriptf x/* accept-encoding: gzipr deflate accept-language: zh<nuser-agent: mozilla/4.0 (compatible; msie 7.0; windows ml - entity” content-length:

15、 0丄 content-type: application/json; charset=utf-8miscellaneous referer: http:/king/wsqefeult.aspxx-requested-vith: xmlhttprequesttransjxjrt脚本之家wiu iu.obs l.net connection: keep-alive 丄 host: king不过，需要注意的是：如果我们设置了 jquery的contenttype, 乂发送了一个空的json对彖，并口还手工复制代码代码如f：function funl() $.ajax(url: ,webservic

16、el.asmx/wsl,/type: “post舄datatype: "json'1,contenttype: happlication/json; charset=utf-8,/data:beforesend: function(x) x.setrequestheader(ncontent-type11, "application/json; charset=utf-8n);,success: function(json) alert(js on.d);,error: function(x, e) alertfx.resp on setext);,complete

17、: function(x) alert(x.resp on setext););么呢？因为，jquery为contenttype设置了一次值，我们手工又设置一次，而在ie是多次设置content-typ e的值它会追加，而不是替换，不过这并不影响webservice正确返回json数据给我们，不过应该避免这 种情况出现。request headenspost /ws/webservicel. asaa/wsl ht7f 1. 1-cache pragma: no<ache白 client” accept: appliestion/json, text/javascriptz 十h acc

18、ept-encoding: gzipf deflateh accept-language: zh<nl- user-agent: mozilla/4.0 (compatible; msie 7.0; windows nt 6.1; trident/4.0; slcc2 白 entity” con ten t-length: 2contentstype: appliestion/json; charset=utf-8z application/json; charset=utf-8miscellaneous” referer: http:/king/ws/defbult.bspxl- x-

19、requestedith: xmlhttprequest白 transport卜 conn ection: keep-alive host: king脚本之豕ww w. jb5 l.net如果说上面那种设置两次content-type的值还能正确的返回json数据，那么下面代码就不能正确返回json数据了。复制代码代码如下:function funl() $.ajax(url: ,webservicel.asmx/wsll,/type: "post",datatype: njsorf：data:beforesend: function(x) success: functio

20、n(json) alert(json.d);,error: function(x, e) alert(x.resp on setext);,complete: function(x) alertfx.resp on setext););从卞图可以看到content-type也有两个值，不过这个利上面那个还有点不一样，这次呢这个值是不一样的, 一个是 application/x-www-form-urlencoded, 一，个是 application/json; charset=utf-8,这种情况就不能正确的 返回json格式的数据了。这乂是为什么呢？这是因为我们没有为jquery设置con

21、tenttype为，并且乂提交 了一个空的json对象，可以为什么这样就会使用content-type出现这样的情况的呢？因为jquery的ajax 用post方法提交数据的时候，如果没冇设置contenttype,并h所发送的数据不为空，那么它就会为cont enttype设置一个默认值，也就是application/x-www-form-urlencoded,所以就会出现这种情况了。所以呢，在用post方法请求的时候，如果有提交数据，也就是jquery ajax的datar m性不空的情况下(不 为空的情况：1.发送一个空对象调用无参数的webservice方法；2.请一个冇参数的webs

22、ervice方法。)，一 定要设置contenttype属性，并且不能乎工设置content-type 了。request headerspost /ws/webservicel. assx/wsl http/1. 1 日cachepragma: no -caches clientk- accept: application/jsonz text/javascriptz 十h- accept-encoding: gzipr deflateh- accept-language: zh<n user-agent: mozilla/4.0 (compatible; msie 7.0; wind

23、ows nt 6 1; trident/4.0; slcc2; .net s- entityk- content-length: 2l-content-type: application/x-v»ww-form-urlencod已d, application/json; charset=utf-8 miscellaneous:-referer: http:/king/ws/default.aspxl -x-requestedth: xf'llhttprequesttransportconnection: keep-alive脚本之家l- host: kingwww.ob51.

24、net卜面是请求冇参数的webservice方法，一些诸况在上面也都说过了，这里就不多说了。不过有一点要注意，就是用post方法请求的吋候，不用手工去编码有汉字的参数值，如下而的data: ”sjpost 有参数 v，就不用写成 data: ”s:”+encodeurfpost 有参数 ”丁 了。复制代码代码如下:function fun2() $ajax(url: ,webservicel.asmx/ws2,/contenttype: happlication/json; charset=utf-8h,type: “post蔦datatype: njsorf：data: "sfpo

25、st 有参数''：success: function(json) alert(json.d);,error: function(x, e) alert(x.responsetext);,complete: function(x) alert(x.resp on setext);)；以上是我们说的用post方法请求，下面是用get方法请求。下面是一个用get方法请求一个无参数的webservice方法，不过这是一段错误的代码，错在哪儿呢，各们童鞋可以自己想一下，我们下面一起说。复制代码代码如下：function fun3() $.ajax(url: ,webservicel.as

26、mx/ws3,/type: “get舄datatype: njson",data:contenttype: happlication/json; charset=utf-8h,success: function(json) alertfjs on.d);lerror: function(x, e) alertfx.resp on setext);,complete: function(x) alertfx.resp on setext););下图是用上面段代码请求所抓取的request headers,大家看一下，问题出在哪里。口 clienth accept: applicatio

27、n/json text/javascriptz x/xh accept-encoding: gzipr deflateh accept-language: zh<nl user-agent: mozilla/4.0 (compatible; msie 7.0; windows pb- miscellaneoush referer: http:king/wsqefault.&spxx-requested-v»ith: xmlhttprequest白-transporth connection: keep-alivel- host: king脚本之家uiui w.jbs l

28、.net卜而的代码是正确的用get方法调用无参数的webservice方法。复制代码代码如下:function fun3() $.ajax(url: ,webservicel.asmx/ws3,/datatype: njson蔦data:beforesend: function(x) x.setrequestheader(ncontent-type11, uapplication/json; charset=utf-8n);,success: function(json) alert(js on.d);,error: function(xf e) alert(x.resp on setext);,complete: function(x) alert(x.resp on setext););下ifti的代码是正确的用get方法调用有参数的webservice方法。复制代码代码如下：function fun4() $.ajax(url: ,