Jquery + Ajax 调用 webService

 

webService中要实现ajax调用，则要加这句代码:

    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
    [System.Web.Script.Services.ScriptService] 

 代码下载

 

代码

         // 无参数调用
        $(document).ready( function () {
            $( ' #btn1 ' ).click( function () {
                $.ajax({
                    type:  " POST " ,    // 访问WebService使用Post方式请求
                    contentType:  " application/json " ,  // WebService 会返回Json类型
                    url: WebServiceURL  +   " WebService1.asmx/HelloWorld " ,  // 调用WebService的地址和方法名称组合 ---- WsURL/方法名
                    data:  " {} " ,          // 这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到       
                    dataType:  ' json ' ,
                    success:  function (result) {      // 回调函数，result，返回值
                        $( ' #dictionary ' ).append(result.d);
                    }
                });
            });
        });


         // 有参数调用
        $(document).ready( function () {
            $( " #btn2 " ).click( function () {
                $.ajax({
                    type:  " POST " ,
                    contentType:  " application/json " ,
                    url: WebServiceURL  +   " WebService1.asmx/GetWish " ,
                    data:  " {value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009} " ,
                    dataType:  ' json ' ,
                    success:  function (result) {
                        $( ' #dictionary ' ).append(result.d);
                    }
                });
            });
        });


         // 返回集合（引用自网络，很说明问题）
        $(document).ready( function () {
            $( " #btn3 " ).click( function () {
                $.ajax({
                    type:  " POST " ,
                    contentType:  " application/json " ,
                    url: WebServiceURL  +   " WebService1.asmx/GetArray " ,
                    data:  " {i:10} " ,
                    dataType:  ' json ' ,
                    success:  function (result) {
                        $(result.d).each( function () {
                             // alert(this);
                            $( ' #dictionary ' ).append( this .toString()  +   "   " );
                             // alert(result.d.join(" | "));
                        });
                    }
                });
            });
        });


         // 返回复合类型
        $(document).ready( function () {
            $( ' #btn4 ' ).click( function () {
                $.ajax({
                    type:  " POST " ,
                    contentType:  " application/json " ,
                    url: WebServiceURL  +   " WebService1.asmx/GetClass " ,
                    data:  " {} " ,
                    dataType:  ' json ' ,
                    success:  function (result) {
                        $(result.d).each( function () {
                             // alert(this);
                            $( ' #dictionary ' ).append( this [ ' ID ' ]  +   "   "   +   this [ ' Value ' ]);
                             // alert(result.d.join(" | "));
                        });

                    }
                });
            });
        });

         // 返回DataSet(XML)
        $(document).ready( function () {
            $( ' #btn5 ' ).click( function () {
                $.ajax({
                    type:  " POST " ,
                    url: WebServiceURL  +   " WebService1.asmx/GetDataSet " ,
                    data:  " {} " ,
                    dataType:  ' xml ' ,  // 返回的类型为XML ，和前面的Json，不一样了
                    success:  function (result) {
                         // 演示一下捕获
                         try  {
                            $(result).find( " Table1 " ).each( function () {
                                $( ' #dictionary ' ).append($( this ).find( " ID " ).text()  +   "   "   +  $( this ).find( " Value " ).text());
                            });
                        }
                         catch  (e) {
                            alert(e);
                             return ;
                        }
                    },
                    error:  function (result, status) {  // 如果没有上面的捕获出错会执行这里的回调函数
                         if  (status  ==   ' error ' ) {
                            alert(status);
                        }
                    }
                });
            });
        });




         // Ajax 为用户提供反馈，利用ajaxStart和ajaxStop 方法，演示ajax跟踪相关事件的回调，他们两个方法可以添加给jQuery对象在Ajax前后回调
         // 但对与Ajax的监控，本身是全局性的
        $(document).ready( function () {
            $( ' #loading ' ).ajaxStart( function () {
                $( this ).show();
            }).ajaxStop( function () {
                $( this ).hide();
            });
        });

转载于:https://www.cnblogs.com/chinabc/archive/2010/08/27/1810214.html