本文将介绍jWuery调用基于.NET Framework 3.5的WebService返回JSON数据,另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题,还有出现问题的原因.
jQuery调用WebService网上的介绍也比较多,最近的项目中我也用到不少,一直都很少用.NET Ajax,比较钟情于jQuery调用请求WebService有几种方法,这主要说一下POST与GET方法,其实安全方法考虑不建议使用GET方法,下面就说一下用jquery调用WebService的参数设置及设置不当所出现的问题,还有出现问题的原因。我们这里只讨论返回JSON数据的情况,相信大家都比较了解JSON格式的数据对于ajax的方便,不了解的可以从网上找一下这方面的资料来看一下,这里就不多说了,或者我以后再写一篇这方面的文章。
下面是jQuery调用WebService服务器端代码:
using System.Web.Script.Services; using System.Web.Services; namespace WebService35 { /// /// WebService1 的摘要说明 /// [WebService(Namespace = "")] [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; } } }
WS1和WS2方法为POST方法请求的方法,所以设置UseHttpGet 为false,WS3与WS4为GET方法请求的方法,设置UseHttpGet 为true。
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); } }); }