`
wlcxx98
  • 浏览: 62809 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

阅读更多

jquer调用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
{
    /// 
    /// 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格式的数据给我们使用了。

还有一种方法就是:既然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编一下码,要不服务端接收到的数据为乱码。

本来这篇文章前几天就差不多写好了,因为一开始是直接在CSDN上直接写的,眼看就要写完了,IE挂了,CSDN的发布系统又没有自动保存功能,555...

另:本文为原创,如要转载,请注明出处。

相关代码地址:http://download.csdn.net/source/1510113

分享到:
评论

相关推荐

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

    .NET Framework 3.5的发布解决了WebService调用中json问题,本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据,另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题,还有...

    jquery调用Webservice的demo(.net)

    本教程将通过一个简单的示例来讲解如何使用jQuery调用.NET环境下的ASMX Web服务。 一、jQuery与Web服务基础 1. jQuery:jQuery简化了JavaScript的API,提供了一致的跨浏览器接口,使得开发者可以更方便地处理DOM...

    jQuery与ASP.NET打造AJAX技术

    在实际应用中,可能的场景包括:使用jQuery的$.getJSON()或$.get()方法获取ASP.NET WebService或ASHX返回的JSON数据,然后利用这些数据更新DOM元素;或者使用$.post()方法发送数据到服务器,实现无刷新的表单提交。 ...

    asp.net webservice返回json的方法

    为了返回JSON,我们需要利用.NET Framework提供的JSON序列化工具或第三方库,例如Newtonsoft.Json(Json.NET)。 以下是一个简单的示例,展示如何将ASP.NET Web Service配置为返回JSON: 1. **引入Json.NET**:...

    Asp.Net的webService简单示例

    本示例主要展示了如何在C#中创建一个简单的Web服务,并利用jQuery进行调用,以及如何返回自定义的JSON数据,而非依赖ASP.NET默认的`{d:content}`格式。 首先,创建一个新的ASP.NET Web服务项目。在Visual Studio中...

    Jquery.中文版.教程

    2. **jQuery 调用基于.NET Framework 3.5的WebService返回JSON数据.doc**: 这部分内容会讲述如何使用jQuery的`$.ajax()` 或 `$.getJSON()` 方法来与.NET的WebService进行异步通信,接收并处理JSON格式的数据,这对于...

    jquery ajax和webservice

    ASMX是.NET Framework中创建Web服务的一种方式,它可以暴露可从任何地方访问的Web方法。这些Web方法通常处理HTTP请求,返回XML或JSON格式的数据,非常适合与AJAX进行交互。 **jQuery与ASMX的交互** 要使用jQuery与...

    ASPNET+WebService+获取天气

    ASP.NET 是微软开发的一种用于构建Web应用程序的框架,它基于.NET Framework,提供了丰富的功能和工具,使得开发者可以高效地创建动态、数据驱动的网站。在本案例中,"ASPNET+WebService+获取天气"的主题表明我们将...

    ASP.NET刷新界面

    ASP.NET是一种基于.NET Framework的服务器端编程模型,用于构建动态Web应用程序。在ASP.NET中,刷新界面是指重新加载或更新用户界面(UI)以便显示最新的数据或执行特定操作后的变化。这里我们将详细讨论标题和描述...

    aspx实现ajax案例

    总的来说,这个案例将展示如何在ASP.NET ASPX页面中集成C#和Ajax技术,通过UpdatePanel实现页面的局部更新,并通过Web服务或PageMethod处理客户端请求,返回JSON数据,以此提高Web应用的交互性和效率。理解并掌握...

    .net平台简单的链接数据库SQL2005

    首先,我们需要了解.NET Framework提供的ADO.NET(数据访问对象)框架。ADO.NET是微软开发的一个用于数据库访问的组件,它包括DataSet、DataTable、DataAdapter、Connection、Command、DataReader等多个类,这些类...

    ajax调用服务

    我们将深入探讨如何使用jQuery库中的Ajax方法来调用各种后端服务,包括WCF(Windows Communication Foundation)、WebServer、ASHX(自定义HTTP处理程序)、一般处理程序(.ashx)、Web服务(.asmx)以及ASP.NET的....

    aspnet用javascript或者是HTML调用CS文件中的方法

    ASP.NET是一种基于微软.NET Framework的Web应用程序开发框架,它允许开发者使用C#等语言创建动态网站、Web应用程序和Web服务。在ASP.NET中,通常后端逻辑(如CS文件中的方法)与前端交互(如JavaScript或HTML)是...

    Net下使用Ajax

    在.NET环境中使用Ajax技术可以极大地提升Web应用的用户体验,因为它允许数据异步更新,无需刷新整个页面。Ajax(Asynchronous JavaScript and XML)并不是一个单一的技术,而是一组用于创建快速、动态网页的技术集合...

    Ajax电子版教程,C#,VB例子都有

    服务器处理请求后,将响应数据返回,JavaScript接收到数据后更新页面的部分内容,而无需刷新整个页面。 接下来,我们将深入到C#和VB.NET的Ajax应用。C#是.NET Framework的主要编程语言,而VB.NET则是另一种广泛使用...

    Ajax 无刷新评论 asp.net

    // 这里可以使用ADO.NET、Entity Framework或其他ORM工具来操作数据库 // 示例代码:使用SQL Server存储过程 using (SqlConnection conn = new SqlConnection("your_connection_string")) { conn.Open(); ...

    net学习计划

    ### .NET 学习计划详解 #### 一、学习计划概览 ... - **JSON**:掌握JSON数据格式的使用。 - **DOM操作**:学习如何操作DOM节点以更新页面内容。 - **事件处理**:实现用户交互事件的监听和响应。

Global site tag (gtag.js) - Google Analytics