有時候，越深入去了解一個點，越發覺得自己無知，而之前當自己曉得一兩個片面的點還洋洋自得，殊不知，這是多么諷刺，JQuery中有很多優勢，比如異步提交值，部分刷新，給用戶很好的體驗感。目前為止，大部分項目基本都是MVC開發，部分WebForm的項目逐漸被淘汰，恰巧當前維護是銀行多年前的古董項目，WebForm已許久不接觸， 趁此機會，總結下與Ajax的交互，雖然MVC與Ajax的交互更友好簡潔。
下面介紹常見的JQuery中對Ajax的應用 Load（）、Ajax（）、Get（）、Post（）、getJson()、getScript（）
jQery對Ajax操作進行了封裝，常見的 ajax()屬於最底層的方法，使用頻率很高的 $.post()、$.get() 是在最底層的基礎上又細分出來封裝的一層，因為其分別對應的ajax()中 type的 post、get。可簡單的理解為
- GET - 從指定的資源請求數據。
- POST - 向指定的資源提交要被處理的數據
前台發送數據-->后台接收-->進行處理-->返回前台-->前台將值顯示在評論區
為什么說是繞了一大圈，因為GET、POST 是有區別的，我這里為了統一寫DEMO，不免在用法上有畫蛇添足之嫌
前台body內容總覽
<body>
<form id="form1" runat="server">
<div>
姓名：<asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox>
<p></p>
評論：<asp:TextBox ID="txtContent" runat="server" ClientIDMode="Static" TextMode="MultiLine"></asp:TextBox>
<p></p>
<asp:Button ID="btnAjax" runat="server" Text="Ajax" ClientIDMode="Static"></asp:Button>
<asp:Button ID="btnPost" runat="server" Text="Post" ClientIDMode="Static"></asp:Button>
<asp:Button ID="btnGet" runat="server" Text="Get" ClientIDMode="Static" />
<p></p>
</div>
<div class="comment">評論區</div>
<div id="resTest" title="content" style="height:auto"></div>
</form>
</body>
1. Ajax（）
①可以直接請求到后台中某個方法，而不必在后台Load事件中處理
②可以設置失敗時的函數
前台界面：（PS：form表單下的ASP中button控件，默認類型值是submit，所以在前台方法下面都增加了 return false；下同）
$("#btnAjax").click(function () { $.ajax({ type: "post", contentType: "application/json; charset=utf-8", dataType: "json", url: "WebForm1.aspx/ReceiveJson", data: "{'Name':'郎中令','Content':'200'}", success: function (data) { $("#resTest").append(data.d); }, error: function () { alert("發送失敗"); } }); return false; });
后台界面：
//參數名必須與前台JSon鍵名一致 [WebMethod] public static string ReceiveJson(string Name, string Content) { return Name + " " +DateTime.Now.ToString("yyyyMMdd HH:mm:ss")+ "<br /> " + "Content:" + Content; }
2. post() 主要用來區別get（）
① 方式不同， 一般表單的提交中get請求會讓參數顯示在url 欄中進行傳遞，post請求是作為http消息的實體內容發送給后台
② 大小不同， get請求是以url 傳遞參數的，所以會有大小限制，而post則可以傳更多更大的數據
③ 安全性不同， get請求的數據會被瀏覽器緩存起來，可在歷史記錄中查看，對於密碼等某些信息會不安全
前台界面：
$("#btnPost").click(function () { if ($("#txtName").val()!=""&&$("#txtAge").val()!="") { $.post("WebForm1.aspx", { Name: $("#txtName").val(), Content: $("#txtContent").val() }, function (data) { $("#resTest").append(data); }); } else { alert("界面中尚有文本框值未填寫"); } return false; });
3. get() 該說的前面都說了，用法以及參數結構和post（）一樣，這里沒什么好講的
$("#btnGet").click(function () { if ($("#txtName").val()!=""&&$("#txtAge").val()!="") { $.get("WebForm1.aspx", { Name: $("#txtName").val(), Content: $("#txtContent").val() }, function (data,status) { $("#resTest").html(data); }); } else { alert("界面中尚有文本框值未填寫"); } return false; });
對於后台而言，Post（）和Get（）請求，都必須在Load 事件里面處理，即使前台定義后台中的方法，像ajax()那樣 ，為 url: "WebForm1.aspx/ReceiveJson", 也不能處理，這點我也暫時沒有想明白，線上也暫無解決方案。此兩者后台的處理方式完全一樣，如下，僅僅是將接收的值中間 加了一個時間
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Request["Name"] != null || Request["Content"] != null) { string all = Request["Name"].ToString()+" " +DateTime.Now.ToString("yyyyMMdd HH:mm:ss")+ "<br /> " + Request["Content"].ToString(); Response.Write(all); Response.End(); } } }
三個方法已羅列出來，啟動項目，看看效果如何
好吧，我承認，這個太丑了，功能還是實現了的
權當是個學習記錄
----市人皆大笑，舉手揶揄之