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, 返回一個字符串的處理。