欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery以JSON方式提交數據到服務端示例代碼

 更新時間:2014年05月05日 15:38:04   作者:  
這篇文章主要介紹了JQuery如何以JSON方式提交數據到服務端,需要的朋友可以參考下
JQuery將Ajax數據請求進行了封裝,從而使得該操作實現起來容易許多。以往我們要寫很多的代碼來實現該功能,現在只需要調用$.ajax()方法,并指明請求的方式、地址、數據類型,以及回調方法等。下面的代碼演示了如何將客戶端表單數據封裝成JSON格式,然后通過JQuery的Ajax請求將數據發(fā)送到服務端,并最終將數據存儲到數據庫中。服務端定義為一個.ashx文件,事實上你可以將服務端定義為任何能接收并處理客戶端數據的類型,如Web Service,ASP.NET Page,Handler等。

首先,在客戶端,通過JavaScript腳本將頁面表單數據封裝成JSON格式。GetJsonData()函數完成了這一功能。然后我們通過$.ajax()方法將數據發(fā)送到服務端的RequestData.ashx。其中用到了JSON.stringify()方法,它可以將客戶端發(fā)送的數據轉換成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接口來處理異步請求,代碼接口大同小異。

相關文章

  • jquery通過select列表選擇框對表格數據進行過濾示例

    jquery通過select列表選擇框對表格數據進行過濾示例

    這篇文章主要介紹了jquery通過select列表選擇框對表格數據進行過濾示例,需要的朋友可以參考下
    2014-05-05
  • jQuery中:disabled選擇器用法實例

    jQuery中:disabled選擇器用法實例

    這篇文章主要介紹了jQuery中:disabled選擇器用法,實例分析了:disabled選擇器功能、定義及選取所有禁用的表單元素的技巧,需要的朋友可以參考下
    2015-01-01
  • jQuery解析json數據實例分析

    jQuery解析json數據實例分析

    這篇文章主要介紹了jQuery解析json數據的具體實現方法,結合實例形式較為詳細的分析了jQuery解析json格式數據的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-11-11
  • jQuery結合CSS制作動態(tài)的下拉菜單

    jQuery結合CSS制作動態(tài)的下拉菜單

    這篇文章主要介紹了jQuery結合CSS制作一個動態(tài)的下拉菜單,下拉菜單可以彌補空間的不足,感興趣的小伙伴們可以參考一下
    2015-10-10
  • Jquery操作cookie記住用戶名

    Jquery操作cookie記住用戶名

    jquery.cookie.js是一個基于jquery的插件,一個輕量級的cookie 插件,可以讀取、寫入、刪除 cookie。接下來通過本文給大家介紹Jquery操作cookie記住用戶名,需要的朋友參考下吧
    2016-03-03
  • jquery實現心算練習代碼

    jquery實現心算練習代碼

    實現代碼的過程中,有兩個問題很棘手,一個是開始按鈕連續(xù)單擊,計時時間會迅速加快;二是如何判定玩家單擊哪個按鈕。
    2010-12-12
  • 使用jQuery給input標簽設置默認值

    使用jQuery給input標簽設置默認值

    這篇文章主要介紹使用jQuery給input標簽設置默認值的方法,實例講解,非常實用,需要的朋友可以參考下。
    2016-06-06
  • 淺談jquery.form.js的ajaxSubmit和ajaxForm的使用

    淺談jquery.form.js的ajaxSubmit和ajaxForm的使用

    下面小編就為大家?guī)硪黄獪\談jquery.form.js的ajaxSubmit和ajaxForm的使用。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • html5的自定義data-*屬性和jquery的data()方法的使用示例

    html5的自定義data-*屬性和jquery的data()方法的使用示例

    人們總喜歡往HTML標簽上添加自定義屬性來存儲和操作數據,這就是為什么在HTML5規(guī)范里增加了一個自定義data屬性,你可以拿它做很多有用的事情
    2013-08-08
  • jQuery中將函數賦值給變量的調用方法

    jQuery中將函數賦值給變量的調用方法

    當函數作為其他函數的參數時和獨立調用時,寫法是有區(qū)別的,前者不用附加(),而后者必須加()
    2012-03-03

最新評論