溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法示例

發(fā)布時(shí)間：2020-09-09 19:49:31 來(lái)源：腳本之家 閱讀：146 作者：willingtolove 欄目：web開(kāi)發(fā)

本文實(shí)例講述了jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法。分享給大家供大家參考，具體如下：

0、一般情況下，通過(guò)鍵值對(duì)的方式將參數(shù)傳遞到服務(wù)端

0.1 客戶(hù)端代碼：

$.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)求：

jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法示例

從上面的截圖中可以看出，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獲取值；

客戶(hù)端代碼：

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)求：
jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法示例

從圖中可以看出，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 客戶(hù)端代碼：

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; }

}

上面的代碼中，客戶(hù)端發(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)求：
jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法示例

方法三：服務(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)容可查看本站專(zhuān)題：《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)
推薦閱讀：
  1. Ajax 的用法
  2. contentType

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手