最近學習JQuery，用到了它的POST方法向伺服器請求資料，伺服器返回Json格式的資料。看上去非常簡單，但出了很多莫名其妙的問題。主要原因就是第一次學習太生疏，很多地方寫的不規範造成的。這方面的資料雖然可以從網上查到，但是百花齊放，怎麼寫的都有，在此，我就以標準的格式寫一個例子，希望對大家有協助，也給自己留著備用。
本文適合有一定JQuery、ASP.NET基礎的讀者閱讀。
在寫例子之前，還要囉嗦些重點內容：
無論何種用戶端，向伺服器傳遞資料都有兩種方式：GET方法和POST方法。GET方法傳遞的資料直接寫在URL上，比如：http://www.kpdown.com/soft/download.asp?softid=805&downid=3&id=711這個請求就包含了三個參數。優點是使用方便，一目瞭然；缺點是傳遞的資料有限，而且不安全。而POST方法，則要通過特定的函數來執行，無論什麼語言，無論什麼函數，只要是POST，一般會有這幾個參數：POST地址、POST資料、傳回值（回呼函數）、HTTP頭資訊、返回資料格式等。POST的優點是資料量大，安全。
對於伺服器端，以ASP.NET為例，如果想要得到GET方法傳遞過來的參數，可以用Request.QueryString[“參數名”]來擷取；如果向得到POST方法傳遞過來的資料，可以用Request.Form[“參數名”]來擷取。向用戶端返回資料可以簡單的用Response.Write()方法。
對於Json，這是一種資料格式。能夠方便快速的被解析，可以匹敵XML。網路上有很多關於它的知識，但是寫法很不規範，很容易給初學者造成困惑，更嚴重的是造成程式莫名其妙的出錯，最常見的錯誤：POST回呼函數不執行。這個困擾了許多人的問題，一般都是由於Json資料格式不對造成的。在本例中會用最規範的方式展示如何使用Json資料。我在這貼一個簡單易懂的圖，相信理解能力強的看完圖就不用看例子了。（具體關於Json的知識，請參閱權威網站：http://www.w3school.com.cn/json/index.asp）
在本例中以HTML靜態網頁作為前台頁面，不可以用.NET的aspx，因為我們的POST是從JavaScript中發出的，非ASP.NET自身發出，會被ASP.NET屏蔽，一定要注意。本例以ASP.NET的一般處理常式ashx作為伺服器，在JavaScript中調用JQuery架構的POST方法，向伺服器請求Json資料，並將請求到的Json資料解析，插入到HTML頁面中。本例類比了一個查詢功能，輸入正確的使用者名稱、密碼，即可獲得所有員工的基本資料以及備忘資訊。展示了一個完整的HTML調用JQuery與ASP.NET伺服器互動的例子。
初始頁面：
輸入正確頁面：
輸入錯誤頁面：
HTML前台代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>伺服器互動執行個體</title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/Verification.js" type="text/javascript"></script></head><body> <div class="operater"> <p>使用者名稱：<input ID="txtUserName" type="text"></p> <p>密 碼：<input ID="txtPassWord" type="text"></p> <input ID="btnSubmit" type="button" value="提交"> <input ID="btnReset" type="button" value="重設"> </div> <div> <h4>所有員工：</h4> <ul class="worker"> </ul> <h4>備忘資訊：</h4> <ul class="remarksMessage"> </ul> </div> </body></html>
JavaScript代碼（Verification.js）：
$(document).ready(function () { var txtUserName = $("#txtUserName"); //儲存文字框對象，提高效率 var txtPassWord = $("#txtPassWord"); //註冊提交按鈕單擊事件 $("#btnSubmit").click(function () { if ("" != txtUserName.val() && "" != txtPassWord.val()) { //簡單的驗證放在用戶端，減少伺服器壓力 //利用post方式向伺服器請求資料 $.post("getUserMessage.ashx?t=" + Math.random(), { userName: txtUserName.val(), userPassWord: txtPassWord.val() }, function (json) { if (json) { if (0 != json.worker.length) { $(".worker li").remove(); //移除所有員工列表下的li標記 //遍曆json中的worker數組，擷取所有員工 for (var i = 0; i < json.worker.length; i++) { $("<li>姓名：" + json.worker[i].name + ",性別：" + json.worker[i].sex + ",年齡：" + json.worker[i].age + "</li>").appendTo(".worker"); //從json中讀取資料，構造一個li標籤，插入到ul標籤中 } } else { $(".worker li").remove(); $("<li>暫無資料或驗證失敗！</li>").appendTo(".worker"); } if (0 != json.remarksMessage.length) { $(".remarksMessage li").remove(); //遍曆json中的remarksMessage數組，擷取備忘資訊 for (var i = 0; i < json.remarksMessage.length; i++) { $("<li>" + json.remarksMessage[i].remarks + "</li>").appendTo(".remarksMessage"); } } else { $(".remarksMessage li").remove(); $("<li>暫無資料或驗證失敗！</li>").appendTo(".remarksMessage"); } } else { $("li").remove(); $("<li>暫無資料或驗證失敗！</li>").appendTo(".worker"); $("<li>暫無資料或驗證失敗！</li>").appendTo(".remarksMessage"); } }, "json"); } else { alert("輸入非法！"); } }); //註冊重設按鈕單擊事件 $("#btnReset").click(function () { txtUserName.val(""); txtPassWord.val(""); });});
伺服器代碼（getUserMessage.ashx）：
<%@ WebHandler Language="C#" Class="getUserMessage" %>using System;using System.Web;public class getUserMessage : IHttpHandler { public void ProcessRequest (HttpContext context) { //擷取GET方法傳遞參數：Request.QueryString["參數名稱"]; //擷取POST方法傳遞參數：Request.Form["參數名稱"]; //本例使用的POST方法 context.Response.ContentType = "application/json"; //指定返回資料格式為json string userName = context.Request.Form["userName"]; //讀取post過來的資料 string userPassWord = context.Request.Form["userPassWord"]; string jsonResult=null; if ("admin" == userName && "123" == userPassWord) { //json資料標準格式 jsonResult = "{\"worker\":" + "[" + "{\"name\":\"張三\",\"sex\":\"男\",\"age\":\"25\"}," + "{\"name\":\"李四\",\"sex\":\"女\",\"age\":\"21\"}," + "{\"name\":\"王五\",\"sex\":\"男\",\"age\":\"27\"}" + "]," + "\"remarksMessage\":" + "[" + "{\"remarks\":\"普通員工\"}" + "]}"; } context.Response.Write(jsonResult);//向用戶端返回資料 context.Response.End(); } public bool IsReusable { get { return false; } }}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
