Asp.Net WebApi+JQuery Ajax的Post請求整理
一、總結
1.WebApi 默認支持Post提交處理，返回的結果為json對象，前台不需要手動反序列化處理。
2.WebApi 接收Post提交參數需要指定([FromBody] string name)
3.WebApi 中如果只接收一個基礎類型參數，不能指定key的名稱
4.WebApi Post請求Action只能接收一個參數，也就是說一個Action中[FromBody]僅可指定一次
5.WebApi Post請求處理多個參數可以使用類對象方式接收參數例如：Student
6.在接收Post參數時，如果不想定義類，可以使用Newtonsoft.Json.Linq的JObject json對象容器接收參數
7.(不推薦使用)此接收參數可以使用dynamic本質是使用的JObject，但是提交參數需要指定字符串類型，contentType: 'application/json',類似WebServer中的指定方式
8.在WebApi的Post請求處理中，后台的Action名稱不能使用“GetXXX”方式命名
二、驗證代碼
1.單個參數傳遞
Post獲取請求參數需要指定參數來源 [FromBody]，
Post方式提交時，Action的名稱不能使用'Get'名稱開頭，
如果只接收一個基礎類型參數，不能指定key的名稱
后台：
/// <summary> /// Post獲取請求參數需要指定參數來源 [FromBody] /// </summary> /// <param name="name"></param> /// <returns></returns> public string ShowName([FromBody] string name) { return $"您傳入的名字：‘{name}’"; } public Dictionary<string, string> FindList([FromBody] bool IsShow) { Dictionary<string, string> dict = new Dictionary<string, string>(); if (IsShow) { dict.Add("name1", "張三"); dict.Add("name2", "李四"); } return dict; }
JavaScript：
$.post('/api/postuser/showname', {
'': '張三豐'
}, function (data) {
console.info(data);
alert(data);
});
$.post('/api/postuser/FindList', {
'': true
}, function (data) {
console.info(data);
alert(data);
});
二、多個參數傳遞
1.指定類類型 Student
后台：
public class Student { public string Name { get; set; } public int Age { get; set; } }
/// <summary> /// Post獲取參數可以接收對象類型，接收多個參數 /// </summary> /// <param name="stu"></param> /// <returns></returns> public string ShowName2([FromBody] Student stu) { return $"'{stu.Name}'的年齡為：{stu.Age}"; }
javascript：
$.post('/api/postuser/showname2', {
name: '張三豐',
age: 19
}, function (data) {
console.info(data);
alert(data);
});
2.使用JObject
后台：
/// <summary> /// 在接收Post參數時，如果不想定義類，可以使用Newtonsoft.Json.Linq的JObject json對象容器接收參數 /// </summary> /// <param name="obj"></param> /// <returns></returns> public object ShowName3([FromBody] JObject obj) { return new { name = obj["name"], age = obj["age"], success = true }; }
javascript：
//如果使用JObject，使用對象提交或者使用字符串提交后台都能獲取成功 $.post('/api/postuser/showname3', { name: '張三豐', age: 19 }, function (data) { console.info(data); alert(data); });
3.使用dynamic（不推薦）
后台：
/// <summary> /// 在接收Post參數時，如果前台傳入參數為一個字符串，可以使用dynamic類型接收，不需要指定[FromBody] /// 此處obj的真正類型：FullName = "Newtonsoft.Json.Linq.JObject" /// </summary> /// <param name="obj"></param> /// <returns></returns> public object ShowName3(dynamic obj) { return new { name = obj["name"], age = obj["age"], success = true }; }
javascript：
//需要指定參數類型：contentType: 'application/json',類似WebServer中的指定方式 $.ajax({ url: '/api/postuser/showname3', type:'post', contentType: 'application/json', data: JSON.stringify({ name: '張三豐', age: 19 }), success: function (data) { console.info(data); alert(data); } });
Asp.Net WebApi+AngularJs $http的Post請求整理
一、總結
1.后台使用如上相同
2.$http服務的post在單個參數提交后台接收失敗
3.$http的post提交后台要么使用類類型接收，要么使用JObject接收（包含單個或多個參數）
二、代碼示例
1.單個參數
//單個參數提交，后台接收失敗 $http.post('/api/postuser/showname', { '': '張三' }).then(function (result) { console.info(result); alert(result.data); }).catch(function (err) { console.info(err); alert(err.data.Message); }); //單個參數提交，后台使用JObject接收成功 $http.post('/api/postuser/showlist', { isshow: false }).then(function (result) { console.info(result); alert(result.data); }).catch(function (err) { console.info(err); alert(err.data.Message); });
2.多個參數
//多個參數提交，Student類型接收參數 $http.post('/api/postuser/showname2', { name: '張三', age: '15' }).then(function (result) { //正確請求成功時處理 console.info(result); alert(result.data); }).catch(function (result) { //捕捉錯誤處理 console.info(result); alert(result.data.Message); }); //多個參數提交，JObject接收參數 //WebApi,相應結果為json對象，不需要手動發序列化處理 $http.post('/api/postuser/showname3', { name: '張三', age: '15' }).then(function (result) { //正確請求成功時處理 console.info(result); alert(result.data.name); }).catch(function (result) { //捕捉錯誤處理 console.info(result); alert(result.data.Message); });
更多參考：