jQuery入門(9)：Ajax(調用頁面方法和WebService)

調用頁面方法和webservice

註：

web.config中要指定允許調用web服務。

必須為Post方式來調用。

WEB服務返回的為XML串，所以用戶端要轉換為JSON再處理。

        [WebMethod]

        public static string AjaxServiceTest(string str)

        {

            return string.Format("Hello,{0}", str);

        } 

    [System.Web.Script.Services.ScriptService]

    public class TestWebService : System.Web.Services.WebService

    {

        [WebMethod]

        public string HelloWorld(string s)

        {

            return "Hello World" + s ;

        }

    } 

        function WebServiceMethod() {

            $.ajax({

                type: "POST",

                contentType: "application/json;utf-8",

                url: "TestWebService.asmx/HelloWorld",

                data: "{s:""" + $("#inputName").val() + """}", //傳webservice方法的參數，s是方法的參數，必須一致                                         

                success: function(data) {

                    //將返回字串轉換為json對象

                    var json = null;

                    try {

                        json = eval('(' + data + ')');

                    } catch (e) {

                        alert("返回字串不是json格式!");

                        return;

                    }

                    alert(json.d);

                }

            });

        }

        function PageAjaxServiceTest() {

            $.ajax({

                type: "POST",

                contentType: "application/json;utf-8",

                url: "PageService.aspx/AjaxServiceTest",

                data: "{str:""" + $("#inputName").val() + """}", //傳到.cs靜態方法的參數，str是方法的參數，必須一致                                    

                success: function(data) {

                    //將返回字串轉換為json對象

                    var json = null;

                    try {

                        json = eval('(' + data + ')');

                    } catch (e) {

                        alert("返回字串不是json格式!");

                        return;

                    }

                    alert(json.d);

                }

            });

        }

    </script>

    <div>

    <input id="inputName" type="text" value="" />

    <a href="#" onclick="WebServiceMethod();">調用web服務</a><br /><br />

    <a href="#" onclick="PageAjaxServiceTest();">調用頁面靜態方法</a><br /><br />

    </div> 

註：

        $.post("PagingService.asmx/GetLoginHtml", { s: "fda" },

         function(data) {

             $("#ajaxlogin").html(data);

             alert(data);

         }, "html");