JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端示例代碼
更新時(shí)間:2014年05月05日 15:38:04 作者:
這篇文章主要介紹了JQuery如何以JSON方式提交數(shù)據(jù)到服務(wù)端,需要的朋友可以參考下
JQuery將Ajax數(shù)據(jù)請(qǐng)求進(jìn)行了封裝,從而使得該操作實(shí)現(xiàn)起來(lái)容易許多。以往我們要寫(xiě)很多的代碼來(lái)實(shí)現(xiàn)該功能,現(xiàn)在只需要調(diào)用$.ajax()方法,并指明請(qǐng)求的方式、地址、數(shù)據(jù)類(lèi)型,以及回調(diào)方法等。下面的代碼演示了如何將客戶(hù)端表單數(shù)據(jù)封裝成JSON格式,然后通過(guò)JQuery的Ajax請(qǐng)求將數(shù)據(jù)發(fā)送到服務(wù)端,并最終將數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫(kù)中。服務(wù)端定義為一個(gè).ashx文件,事實(shí)上你可以將服務(wù)端定義為任何能接收并處理客戶(hù)端數(shù)據(jù)的類(lèi)型,如Web Service,ASP.NET Page,Handler等。
首先,在客戶(hù)端,通過(guò)JavaScript腳本將頁(yè)面表單數(shù)據(jù)封裝成JSON格式。GetJsonData()函數(shù)完成了這一功能。然后我們通過(guò)$.ajax()方法將數(shù)據(jù)發(fā)送到服務(wù)端的RequestData.ashx。其中用到了JSON.stringify()方法,它可以將客戶(hù)端發(fā)送的數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象,詳細(xì)的內(nèi)容可以看這里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
$("#btnSend").click(function() {
$("#request-process-patent").html("正在提交數(shù)據(jù),請(qǐng)勿關(guān)閉當(dāng)前窗口...");
$.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("請(qǐng)求已提交!我們會(huì)盡快與您取得聯(lián)系");
}
},
error: function (message) {
$("#request-process-patent").html("提交數(shù)據(jù)失敗!");
}
});
});
function GetJsonData() {
var json = {
"classid": 2,
"name": $("#tb_name").val(),
"zlclass": "測(cè)試類(lèi)型1,測(cè)試類(lèi)型2,測(cè)試類(lèi)型3",
"pname": $("#tb_contact_people").val(),
"tel": $("#tb_contact_phone").val()
};
return json;
}
再來(lái)看看服務(wù)端的代碼,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;
}
}
}
定義一個(gè)帶有Serializable特征屬性的類(lèi)RequestDataJSON用來(lái)將客戶(hù)端數(shù)據(jù)進(jìn)行反序列化,從而獲取到數(shù)據(jù)并存入數(shù)據(jù)庫(kù)。上述代碼中使用了EntityFramework,從而使得數(shù)據(jù)庫(kù)的交互代碼變得很簡(jiǎn)潔。返回結(jié)果有兩種,對(duì)應(yīng)ajax中的回調(diào)函數(shù)success()和error()。在success()回調(diào)函數(shù)中,如果返回結(jié)果的值大于0,則表示通過(guò)EntityFramework添加到數(shù)據(jù)庫(kù)中的記錄數(shù);在error()回調(diào)函數(shù)中,返回結(jié)果則顯示了失敗的具體信息。
RequestData類(lèi)繼承了IHttpHandler接口,表明它是以同步的方式處理客戶(hù)端請(qǐng)求。當(dāng)然,你也可以將其改為繼承IHttpAsyncHandler接口來(lái)處理異步請(qǐng)求,代碼接口大同小異。
首先,在客戶(hù)端,通過(guò)JavaScript腳本將頁(yè)面表單數(shù)據(jù)封裝成JSON格式。GetJsonData()函數(shù)完成了這一功能。然后我們通過(guò)$.ajax()方法將數(shù)據(jù)發(fā)送到服務(wù)端的RequestData.ashx。其中用到了JSON.stringify()方法,它可以將客戶(hù)端發(fā)送的數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象,詳細(xì)的內(nèi)容可以看這里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
復(fù)制代碼 代碼如下:
$("#btnSend").click(function() {
$("#request-process-patent").html("正在提交數(shù)據(jù),請(qǐng)勿關(guān)閉當(dāng)前窗口...");
$.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("請(qǐng)求已提交!我們會(huì)盡快與您取得聯(lián)系");
}
},
error: function (message) {
$("#request-process-patent").html("提交數(shù)據(jù)失敗!");
}
});
});
function GetJsonData() {
var json = {
"classid": 2,
"name": $("#tb_name").val(),
"zlclass": "測(cè)試類(lèi)型1,測(cè)試類(lèi)型2,測(cè)試類(lèi)型3",
"pname": $("#tb_contact_people").val(),
"tel": $("#tb_contact_phone").val()
};
return json;
}
再來(lái)看看服務(wù)端的代碼,RequestData.ashx.
復(fù)制代碼 代碼如下:
[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;
}
}
}
定義一個(gè)帶有Serializable特征屬性的類(lèi)RequestDataJSON用來(lái)將客戶(hù)端數(shù)據(jù)進(jìn)行反序列化,從而獲取到數(shù)據(jù)并存入數(shù)據(jù)庫(kù)。上述代碼中使用了EntityFramework,從而使得數(shù)據(jù)庫(kù)的交互代碼變得很簡(jiǎn)潔。返回結(jié)果有兩種,對(duì)應(yīng)ajax中的回調(diào)函數(shù)success()和error()。在success()回調(diào)函數(shù)中,如果返回結(jié)果的值大于0,則表示通過(guò)EntityFramework添加到數(shù)據(jù)庫(kù)中的記錄數(shù);在error()回調(diào)函數(shù)中,返回結(jié)果則顯示了失敗的具體信息。
RequestData類(lèi)繼承了IHttpHandler接口,表明它是以同步的方式處理客戶(hù)端請(qǐng)求。當(dāng)然,你也可以將其改為繼承IHttpAsyncHandler接口來(lái)處理異步請(qǐng)求,代碼接口大同小異。
您可能感興趣的文章:
- 用js+xml自動(dòng)生成表格的東西
- 用js實(shí)現(xiàn)的一個(gè)根據(jù)內(nèi)容自動(dòng)生成表格的函數(shù)
- 用按鈕觸發(fā)Javascript動(dòng)態(tài)生成一個(gè)表格的代碼
- jQuery結(jié)合Json提交數(shù)據(jù)到Webservice,并接收從Webservice返回的Json數(shù)據(jù)
- js動(dòng)態(tài)生成指定行數(shù)的表格
- php jq jquery getJSON跨域提交數(shù)據(jù)完整版
- js使用數(shù)組判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù)
- js生成動(dòng)態(tài)表格并為每個(gè)單元格添加單擊事件的方法
- JS控制網(wǎng)頁(yè)動(dòng)態(tài)生成任意行列數(shù)表格的方法
- JS實(shí)現(xiàn)動(dòng)態(tài)生成表格并提交表格數(shù)據(jù)向后端
相關(guān)文章
jquery通過(guò)select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過(guò)濾示例
這篇文章主要介紹了jquery通過(guò)select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過(guò)濾示例,需要的朋友可以參考下2014-05-05jQuery解析json數(shù)據(jù)實(shí)例分析
這篇文章主要介紹了jQuery解析json數(shù)據(jù)的具體實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery解析json格式數(shù)據(jù)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11jQuery結(jié)合CSS制作動(dòng)態(tài)的下拉菜單
這篇文章主要介紹了jQuery結(jié)合CSS制作一個(gè)動(dòng)態(tài)的下拉菜單,下拉菜單可以彌補(bǔ)空間的不足,感興趣的小伙伴們可以參考一下2015-10-10使用jQuery給input標(biāo)簽設(shè)置默認(rèn)值
這篇文章主要介紹使用jQuery給input標(biāo)簽設(shè)置默認(rèn)值的方法,實(shí)例講解,非常實(shí)用,需要的朋友可以參考下。2016-06-06淺談jquery.form.js的ajaxSubmit和ajaxForm的使用
下面小編就為大家?guī)?lái)一篇淺談jquery.form.js的ajaxSubmit和ajaxForm的使用。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09html5的自定義data-*屬性和jquery的data()方法的使用示例
人們總喜歡往HTML標(biāo)簽上添加自定義屬性來(lái)存儲(chǔ)和操作數(shù)據(jù),這就是為什么在HTML5規(guī)范里增加了一個(gè)自定義data屬性,你可以拿它做很多有用的事情2013-08-08jQuery中將函數(shù)賦值給變量的調(diào)用方法
當(dāng)函數(shù)作為其他函數(shù)的參數(shù)時(shí)和獨(dú)立調(diào)用時(shí),寫(xiě)法是有區(qū)別的,前者不用附加(),而后者必須加()2012-03-03