Jquery 调用.net WebService 返回Json、XML方法

浏览数：22 / 时间：2015年06月09日

由于项目需要，使用前端、手机客户端调用ASP.NET的Webservice来获取信息.所以这段时间重温一下Jquery与Web Serivce，过程中碰到不少问题，也有不少的收获。

Service代码

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
 
        [WebMethod]
        public string myMethod(string para)
        {
            return "Hi," + para;
        }
        [WebMethod]
        [ScriptMethod(UseHttpGet = true)]
        public string myMethod1(string para)
        {
            return "Hi," + para;
        }

Web端调用方法

1.Json POST方法（有参）

$.ajax({
            url: "WebServer.asmx/myMethod",
            contentType: "application/json;charset=utf-8",
            beforeSend: function (x) {
                x.setRequestHeader("Content-Type", "application/json;charset=utf-8");
            },
            data: "{para:‘post参数‘}",
            dataType: "json",
            type: "POST",
            error: function (x, e) {
                alert(x.responseText);
            },
            success: function (json) {
                alert(json.d);
            }
        });

注意：1） ajax中的data:"{paraName:paraValue}",如果该方法无参数，则格式为：data:"{}"，再次注意还有红色的两引号，不可少

2）如果成功，我是以HTML的形式显示它的值，大家可以用其它方法，取它的值时用(result.d)

2.Json GET方法（有参）

        $.ajax({
            url: "webserver.asmx/myMethod1",
            data: "para=‘get参数‘",
            type: "GET",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            error: function (x, e) {
                alert(x.responseText);
            },
            success: function (json) {
                alert(json.d);
            }
        });

注意：1） ajax中的data:"para=paraValue",如果有汉字的参数值,可以使用encodeURI编一下码,如果该方法无参数，则格式为：data:""

2）如果成功，取它的值时用(result.d)

3.XML POST方法（有参）

$.ajax({
            url: "webserver.asmx/myMethod",
            data: {para: ‘post参数‘},
            type: "POST",
            dataType: "application/xml",
            error: function (x, e) {
                alert(x.responseText);
            },
            success: function (xml) {
                alert(xml);
            }
        });

这块，data中的para的值为值类型，去掉单引号也可以，不会报错，小弟特意测试过，如果你们去掉后出错了，请给小弟留言说明，当para的值为string类型时，单引号不可去掉，如果是中文最好编一下码，操作成功后返回XML文档，其他地方就没什么可说的了。

4.XML GET 方法 (有参)

$.ajax({
            url: "webserver.asmx/myMethod1",
            data: encodeURI("para=Post参数"),
            type: "GET",
            dataType: "application/xml",
            error: function (x, e) {
                alert(x.responseText);
            },
            success: function (xml) {
                alert(xml);
            }
        });

这里需要注意，ajax中的data:"para=paraValue",如果有汉字的参数值,最好encodeURI编一下码，操作成功后返回XML文档。

5.XML SOAP POST方法

function getPostData() {
        //根据WSDL分析myMethod是方法名，para是传入参数名 
        var postdata = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
        postdata += "<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">";
        postdata += "<soap:Body>";
        postdata += "<myMethod xmlns=\"http://tempuri.org/\">";
        postdata += "<para>"+"aa"+"</para>";
        postdata += "</myMethod>";
        postdata += "</soap:Body>";
        postdata += "</soap:Envelope>";
        return postdata;
    }

$.ajax({
                    type: "POST",
                    url: "webserver.asmx",
                    data: getPostData(), 
                    dataType: "xml", 
                    contentType: "text/xml; charset=utf-8",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader(‘SOAPAction‘, ‘http://tempuri.org/myMethod‘);
                    },
                    success: function (xml) {
                        $(xml).find("myMethod_XMLResult").each(function (i) {
                            alert($(this).children("Title").text());
                        });
                    },
                    error: function (x, e) {
                        alert(‘error:‘ + x.responseText);
                    },
                    complete: function (x) {
                        //alert(‘complete:‘+x.responseText); 
                    }
                });

使用SOAP协议时，请注意上面POST的地址后面并没有像请求JSON数据时一样加上/方法名，而SOAPAction的方法名前面还需要加上命名空间，操作成功后返回的是一个XML格式对象而不是XML文档，可以使用JS来解析XML对象

总结：

1.使用POST方法时，要注意data的参数格式

2.参数中有汉字时最好encodeURI编码

3.使用SOAP时，注意POST地址后面没有/方法名，并且需要在SOAPAction的方法名前面还需要加上命名空间，否则会报错

以上是小弟参考各位大神资料及自己在测试中的问题解决的总结，如有错请指正。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Jquery 调用.net WebService 返回Json、XML方法