jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法示例
本文實(shí)例講述了jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法。分享給大家供大家參考,具體如下:
0、一般情況下,通過(guò)鍵值對(duì)的方式將參數(shù)傳遞到服務(wù)端
0.1 客戶端代碼:
$.ajax({ url: 'TestHandler.ashx', type: 'post', data: { name: "admin", age: 10 }, dataType: 'text', success: function (data) { alert(data); } })
0.2 服務(wù)端代碼:
public void ProcessRequest(HttpContext context) { string bodyText = string.Empty; using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream)) { bodyText = bodyReader.ReadToEnd(); } string name= context.Request["name"].ToString();// "admin" string age = context.Request["age"].ToString();// "10" context.Response.ContentType = "text/plain"; context.Response.Write(bodyText);// "name=admin&age=10" }
0.3 在瀏覽器的網(wǎng)絡(luò)中查看此次請(qǐng)求:
從上面的截圖中可以看出,post請(qǐng)求,是將formdata中鍵值對(duì)用符號(hào)“&”相連,拼接成一個(gè)字符串,傳遞到服務(wù)端,服務(wù)端可以通過(guò)key來(lái)獲取值,或從request的body中讀取整個(gè)字符串;
1、ajax 傳遞復(fù)雜json對(duì)象到服務(wù)端
1.1 方法一:通過(guò)formdata傳值,服務(wù)端通過(guò)key獲取值;
客戶端代碼:
var user1 = { username: 'admin', age: 10 }; var user2 = { username: 'test', age: 11 }; var userArr = []; userArr.push(user1); userArr.push(user2); $.ajax({ url: 'TestHandler.ashx', type: 'post', //contentType: 'application/json', //contentType:"application/x-www-form-urlencoded; charset=UTF-8", data: { Users: JSON.stringify(userArr) }, dataType: 'text', success: function (data) { alert(data); } })
服務(wù)端代碼:
public void ProcessRequest(HttpContext context) { string contentType= context.Request.ContentType;// "application/x-www-form-urlencoded; charset=UTF-8" string users = context.Request["Users"].ToString(); dynamic obj = JsonConvert.DeserializeObject(users); context.Response.ContentType = "text/plain"; context.Response.Write(obj[0].username);// "admin" }
1.2 方法二:通過(guò)formdata方式傳值,服務(wù)端讀取Request.InputStream;
前端代碼:
var user1 = { username: 'admin', age: 10 }; var user2 = { username: 'test', age: 11 }; var userArr = []; userArr.push(user1); userArr.push(user2); $.ajax({ url: 'TestHandler.ashx', type: 'post', //contentType: 'application/json', //contentType:"application/x-www-form-urlencoded; charset=UTF-8", data: JSON.stringify(userArr), dataType: 'text', success: function (data) { alert(data); } })
服務(wù)端代碼:
public void ProcessRequest(HttpContext context) { string contentType= context.Request.ContentType;//"application/x-www-form-urlencoded; charset=UTF-8" string bodyText = string.Empty; using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream)) { bodyText = bodyReader.ReadToEnd();// [{"username":"admin","age":10},{"username":"test","age":11}] } dynamic obj = JsonConvert.DeserializeObject(bodyText); context.Response.ContentType = "text/plain"; context.Response.Write(obj[0].username);// "admin" }
通過(guò)瀏覽器查看此次請(qǐng)求:
從圖中可以看出,content-Type 為application/x-www-form-urlencoded,所以瀏覽器嘗試將傳輸?shù)臄?shù)據(jù)解析成key-value的形式,但實(shí)際在ajax中的data中設(shè)置的是一個(gè)json字符串,無(wú)法解析成key-value的形式,故在服務(wù)端無(wú)法通過(guò)key來(lái)獲取值;只能從Request.InputStream獲取。
雖然通過(guò)Request.InputStream也能獲取到想要的數(shù)據(jù),但是在asp.net mvc項(xiàng)目中,還是有些點(diǎn)需要注意,下面我們?nèi)vc項(xiàng)目中試下...
2、content-Type 對(duì)asp.net mvc項(xiàng)目的重要性
注:示例中服務(wù)端用的是 asp.net ApiController,如果使用普通的mvc controller,還有其他解決方案;
2.1 客戶端代碼:
var user1 = { username: 'admin', age: 10 }; var user2 = { username: 'test', age: 11 }; var userArr = []; userArr.push(user1); userArr.push(user2); $.ajax({ url: 'Test/PostUsers', type: 'post', data: JSON.stringify(userArr), dataType: 'text', success: function (data) { alert(data); } })
2.2 服務(wù)端代碼:
public class TestController : ApiController { public string PostUsers( List<User> Users) { return Users.Count.ToString();// 0 } } public class User { public string username { get; set; } public int age { get; set; } }
上面的代碼中,客戶端發(fā)送的是個(gè)json字符串,服務(wù)端中的變量Users是無(wú)法獲取到前端傳過(guò)來(lái)的json信息的;
那前端如何發(fā)送數(shù)據(jù),后端就能這樣獲取數(shù)據(jù)呢?
2.3 解決方案:(設(shè)置contentType
)
var user1 = { username: 'admin', age: 10 }; var user2 = { username: 'test', age: 11 }; var userArr = []; userArr.push(user1); userArr.push(user2); $.ajax({ url: 'Test/PostUsers', type: 'post', contentType: 'application/json', //contentType:"application/x-www-form-urlencoded; charset=UTF-8", data: JSON.stringify(userArr), //dataType: 'text', success: function (data) { alert(data);// 2 } })
可以看出,ajax中添加了contentType
設(shè)置;
jq的ajax中,contentType
主要設(shè)置你發(fā)送給服務(wù)器的格式,dataType
設(shè)置你收到服務(wù)器數(shù)據(jù)的格式。
在http 請(qǐng)求中,get 和 post 是最常用的。在 jquery 的 ajax 中, contentType
都是默認(rèn)的值:application/x-www-form-urlencoded
,這種格式的特點(diǎn)就是,name/value 成為一組,每組之間用 & 聯(lián)接,而 name與value 則是使用 = 連接。如: wwwh.baidu.com/q?key=fdsa&lang=zh 這是get , 而 post 請(qǐng)求則是使用請(qǐng)求體,參數(shù)不在 url 中,在請(qǐng)求體中的參數(shù)表現(xiàn)形式也是: key=fdsa&lang=zh的形式。
鍵值對(duì)這樣組織在一般的情況下是沒(méi)有什么問(wèn)題的,但是如果想傳遞復(fù)雜的json,可以將contentType
設(shè)置為application/json
,我們?cè)?ajax 傳遞復(fù)雜JSON數(shù)據(jù)時(shí),用 JSON.stringify序列化后,然后發(fā)送,在服務(wù)器端接到然后用 JSON.parse 進(jìn)行還原就行了,這樣就能處理復(fù)雜的對(duì)象了。
2.4 其他的解決方案:(修改服務(wù)端代碼)
方法一:直接讀取Request.Content的值,然后反序列化;
public class TestController : ApiController { //[Route("ddd")] //[HttpPost] public string PostUsers( ) { string str = Request.Content.ReadAsStringAsync().Result;//[{"username":"admin","age":10},{"username":"test","age":11}] var users = JsonConvert.DeserializeObject<List<User>>(str); return users.Count.ToString(); } } public class User { public string username { get; set; } public int age { get; set; } }
方法二:服務(wù)端使用普通的mvc控制器,前端使用key-value傳值;
var user1 = { username: 'admin', age: 10 }; var user2 = { username: 'test', age: 11 }; var userArr = []; userArr.push(user1); userArr.push(user2); $.ajax({ url: 'Test1/PostUsers', type: 'post', data: { Users: userArr }, success: function (data) { alert(data); // 2 } })
public class Test1Controller : Controller { public string PostUsers( List<User> Users) { return Content(Users.Count.ToString());// 2 } } public class User { public string username { get; set; } public int age { get; set; } }
通過(guò)瀏覽器查看該請(qǐng)求:
方法三:服務(wù)端使用普通的mvc控制器,前端使用key-value傳值,value值要json化;
var user1 = { username: 'admin', age: 10 }; var user2 = { username: 'test', age: 11 }; var userArr = []; userArr.push(user1); userArr.push(user2); $.ajax({ url: 'Test1/PostUsers', type: 'post', data: { Users:JSON.stringify(userArr) }, success: function (data) { alert(data); // 2 } })
public class Test1Controller : Controller { public ActionResult PostUsers() { string str = Request["Users"].ToString(); var us = JsonConvert.DeserializeObject<List<User>>(str); return Content(us.Count.ToString());// 2 } }
更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題:《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- JavaScript 解決ajax中parsererror錯(cuò)誤案例詳解
- 如何基于JS實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求的控制詳解
- 利用js實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求限制請(qǐng)求數(shù)量的示例代碼
- vue3.0 加載json的方法(非ajax)
- jQuery+Ajax+js實(shí)現(xiàn)請(qǐng)求json格式數(shù)據(jù)并渲染到html頁(yè)面操作示例
- 原生js實(shí)現(xiàn)ajax請(qǐng)求和JSONP跨域請(qǐng)求操作示例
- js 使用ajax設(shè)置和獲取自定義header信息的方法小結(jié)
- JS解決ajax無(wú)法后退的問(wèn)題記錄
相關(guān)文章
jQuery實(shí)現(xiàn)的placeholder效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的placeholder效果,可實(shí)現(xiàn)輸入框提示文字的功能,并且針對(duì)焦點(diǎn)的情況判定是否顯示,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-08-08自己用jQuery寫(xiě)了一個(gè)圖片的馬賽克消失效果
這篇文章主要介紹的是自己用jQuery寫(xiě)了一個(gè)圖片的馬賽克消失效果實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下2014-05-05jQuery focus和blur事件的應(yīng)用詳解
本篇文章主要是對(duì)jQuery中focus和blur事件的應(yīng)用進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01在瀏覽器中實(shí)現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南
這篇文章主要介紹了在瀏覽器中實(shí)現(xiàn)圖片粘貼的jQuery插件-- pasteimg使用指南,需要的朋友可以參考下2014-12-12jquery實(shí)現(xiàn)選項(xiàng)卡切換代碼實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)選項(xiàng)卡切換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05jquery按回車鍵實(shí)現(xiàn)表單提交的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery按回車鍵實(shí)現(xiàn)表單提交的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05基于jQuery的Tab選項(xiàng)框效果代碼(插件)
依據(jù)className實(shí)現(xiàn)的Tab選項(xiàng)框,支持多個(gè)tab,需要的朋友可以參考下。2011-03-03JQuery中DOM節(jié)點(diǎn)的操作與訪問(wèn)方法實(shí)例分析
這篇文章主要介紹了JQuery中DOM節(jié)點(diǎn)的操作與訪問(wèn)方法,結(jié)合實(shí)例形式分析了jquery操作dom節(jié)點(diǎn)與訪問(wèn)dom節(jié)點(diǎn)相關(guān)實(shí)現(xiàn)技巧及操作注意事項(xiàng),需要的朋友可以參考下2019-12-12使用jQuery操作HTML的table表格的實(shí)例解析
這篇文章主要介紹了使用jQuery操作HTML的table表格的實(shí)例解析,包括用jQuery獲取表格總行數(shù)的小技巧,需要的朋友可以參考下2016-03-03jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作示例
這篇文章主要介紹了jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)日期與時(shí)間戳的轉(zhuǎn)換、運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12