jQuery Ajax 調用 ASP.NET WebServices + (POST)->JSON 數據傳遞,一種開發高效的模式

jQuery是目前前端頁面最好的Javascript"封裝"模式,ASP.NET WebServices是微軟Web項目高效簡潔的模式,2者結合的開發Web程序是目前主流高效的一種開發模式,不瞎掰了,進入Demo演示:

#注意:本文舉例的傳輸數據類型爲 JSON (輕量級的數據交換格式)

#此方式避免了在後端ASP.NET處理時需要序列化處理JSON字符串的麻煩,丟給ASP.NET(WebServices)來處理吧,開發效率更高些。

【js準備】

1.從 www.jquery.com 下載jQuery的Javascrpit封裝包文件: jquery-1.5.1.min.js

2.創建jquery.extend.ajax.json.js文件,代碼如下:

 #以上2個js文件保存到Web項目 ../Script/ 目錄下

 

 

【頁面】

aspx/html 文件頭省略

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <script src="Script/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="Script/jquery.extend.ajax.json.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Button1").click(function () {
                var valueStr = "{value1:" + "'" + $("#Text1").attr("value") + "'}";
                alert(valueStr);
                $.ajaxWebService(

                "WebService1.asmx/TxMsg",

                valueStr,
                function () { $('#Text2').val("loading..."); },
                function (result) { $('#Text2').val(result.d); },
                function (result, status) { if (status == 'error') { alert(status); } }

                );
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Text1" type="text" value="0|U20111|10|||20110325|20110325|TSTER|0|TESTER|||" /><br />
        <br />
        <input id="Button1" type="button" value="button" /><br />
        <br />
        <input id="Text2" type="text" />
    </div>
    </form>
</body>
</html>

 

【WebServices文件:WebService1.asmx

WebServices1.asmx.cs 代碼:

 

 

OK,運行測試一下。很簡單,頁面使用jQuery Ajax帶JSON參數調用ASP.NET WebServices, 返回一個字符串的處理。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章