码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-01-13 23:13:20      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:

由于项目需要,使用前端、手机客户端调用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方法

标签:

原文地址:http://www.cnblogs.com/sa9527/p/4222619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!