JQuery以JSON方式提交數據到服務端

　　JQuery將Ajax數據請求進行了封裝，從而使得該操作實現起來容易許多。以往我們要寫很多的代碼來實現該功能，現在只需要調用$.ajax()方法，並指明請求的方式、地址、數據類型，以及回調方法等。下面的代碼演示了如何將客戶端表單數據封裝成JSON格式，然后通過JQuery的Ajax請求將數據發送到服務端，並最終將數據存儲到數據庫中。服務端定義為一個.ashx文件，事實上你可以將服務端定義為任何能接收並處理客戶端數據的類型，如Web Service，ASP.NET Page，Handler等。

　　首先，在客戶端，通過JavaScript腳本將頁面表單數據封裝成JSON格式。GetJsonData()函數完成了這一功能。然后我們通過$.ajax()方法將數據發送到服務端的RequestData.ashx。其中用到了JSON.stringify()方法，它可以將客戶端發送的JSON數據對象進行序列化操作，詳細的內容可以看這里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

$("#btnSend").click(function() {
    $("#request-process-patent").html("正在提交數據，請勿關閉當前窗口...");
    $.ajax({
        type: "POST",
        url: "RequestData.ashx",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(GetJsonData()),
        dataType: "json",
        success: function (message) {
            if (message > 0) {
                alert("請求已提交！我們會盡快與您取得聯系");
            }
        },
        error: function (message) {
            $("#request-process-patent").html("提交數據失敗！");
        }
    });
});

function GetJsonData() {
    var json = {
        "classid": 2,
        "name": $("#tb_name").val(),
        "zlclass": "測試類型1,測試類型2,測試類型3",
        "pname": $("#tb_contact_people").val(),
        "tel": $("#tb_contact_phone").val()
    };
    return json;
}

　　再來看看服務端的代碼，RequestData.ashx.

[Serializable]
public class RequestDataJSON
{
    public int classid { get; set; }
    public string name { get; set; }
    public string zlclass { get; set; }
    public string pname { get; set; }
    public string tel { get; set; }
}

/// <summary>
/// Summary description for RequestData
/// </summary>
public class RequestData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        int num = 0;
        context.Response.ContentType = "application/json";
        var data = context.Request;
        var sr = new StreamReader(data.InputStream);
        var stream = sr.ReadToEnd();
        var javaScriptSerializer = new JavaScriptSerializer();
        var PostedData = javaScriptSerializer.Deserialize<RequestDataJSON>(stream);

        tb_query obj = new tb_query();
        obj.classid = PostedData.classid;
        obj.name = PostedData.name;
        obj.zlclass = PostedData.zlclass;
        obj.pname = PostedData.pname;
        obj.tel = PostedData.tel;
        obj.ip = context.Request.UserHostAddress.ToString();
        obj.posttime = DateTime.Now.ToString();

        try
        {
            using (var ctx = new dbEntities())
            {
                ctx.tb_query.AddObject(obj);
                num = ctx.SaveChanges();
            }
        }
        catch (Exception msg)
        {
            context.Response.Write(msg.Message);
        }

        context.Response.ContentType = "text/plain";
        context.Response.Write(num);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

　　定義一個帶有Serializable特征屬性的類RequestDataJSON用來將客戶端數據進行反序列化，從而獲取到數據並存入數據庫。上述代碼中使用了EntityFramework，從而使得數據庫的交互代碼變得很簡潔。返回結果有兩種，對應ajax中的回調函數success()和error()。在success()回調函數中，如果返回結果的值大於0，則表示通過EntityFramework添加到數據庫中的記錄數；在error()回調函數中，返回結果則顯示了失敗的具體信息。

　　RequestData類繼承了IHttpHandler接口，表明它是以同步的方式處理客戶端請求。當然，你也可以將其改為繼承IHttpAsyncHandler接口來處理異步請求，代碼接口大同小異。