Hello World Level jQuery.ajax

通常在寫 ASP.NET Web Form 的時候我們很習慣會把一些 html tag 以 Server control 來使用。 但是這些控制項若放在表單中,每次的POST動作都會把這些控制項的內容和狀態一起送回伺服器端,若是有需要的話倒還好,偏偏很多控制項的狀態是根本不需要維護的。像是 Button 啦~ Literal 啦~這些東西其實大多數的時候是死都不會改變的,不過因為天生架構的關係所以每次 POST 回去都會要把這些東西一起送回 Server,實在有點麻煩。所以若是這個時候可以用jQuery來取代 form 傳回 Server 並處理的話可以減輕不少流量的負擔。 實作 一開始我們先開啟一個空的 Web From 專案~ 然後新增一個Index.aspx頁面並設定為起始頁面。 在body中新增下列標籤: 1 2 3 4 5 6 7 <input type="text" id="textbox1" /><input type="button" id="button1" value="jQuery way" /> <form id="form1" runat="server"> <div> <asp:TextBox ID="formTextbox1" runat="server"></asp:TextBox> <asp:Button ID="formbutton1" runat="server" Text="form way" OnClick="formbutton1_Click" /> </div> </form> 並且在body中新增下列script: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function jqueryAjax() { $.ajax({ url: 'ajaxhandler.ashx', type: 'POST', dataType: 'text', cache: 'false', success: function (result) { $('#textbox1').val(result); } }) }; $(function () { $('#button1').bind('click', jqueryAjax) }); 這段script的作用就在於,把id為button1的按鈕的click事件與jqueryAjax函式進行綁定。而jqueryAjax函式的工作就只是呼叫名為ajaxhendler.ashx的泛型處理常式來回應client端的呼叫。 ...

September 26, 2012 · 1 分鐘 · 161 字