MVC和WebApi 使用get和post 傳遞參數。

原文：https://blog.csdn.net/qq373591361/article/details/51508806

我們總結一下用js請求服務器的傳參方法。

Get方式

Get主要是用來查詢，一般分爲無參，一個參數，多個參數，實體對象參數。

1、無參

 

1. //Get沒有參數

2. var get_f1 = function() {

3. $.ajax({

4. type: "get",

5. url: "/api/Demo",

6. success: function(data, status) {

7. if (status == "success") {

8. $("#div_test").html(data);

9. }

10. }

11. });

12. }

2、一個參數

 

1. //Get一個參數

2. var get_f2 = function() {

3. $.ajax({

4. type: "get",

5. url: "/api/Demo",

6. data: { strQuery: JSON.stringify({ Id: "1", Name: "Jim", CreateTime: "1988-09-11" }) },

7. contentType: "application/json",

8. success: function(data, status) {

9. if (status == "success") {

10. $("#div_test").html(data);

11. }

12. }

13. });

14. }

後臺控制器方法

 

1. /// <summary>

2. /// 一個參數

3. /// </summary>

4. /// <param name="strQuery"></param>

5. /// <returns></returns>

6. [HttpGet]

7. public string Get(string strQuery)

8. {

9. //一個參數的時候，如果前端是傳過來的是字符串的json可以反序列化成對象。

10. //TbCharging oData = Newtonsoft.Json.JsonConvert.DeserializeObject<TbCharging>(strQuery);

11. //return String.Format("{0},{1},{2},{3}", oData.Id, oData.Name, oData.Des, oData.CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));

12. return "一個參數" + strQuery;

13. }

備註：在Get方式的時候我們也可以把參數放在url，我這裏爲了前臺寫得統一些，全都放在data裏面，感覺好看一點。

3、多個參數

 

1. //Get多個參數

2. var get_f3 = function() {

3. $.ajax({

4. type: "get",

5. url: "/api/Demo",

6. data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },

7. success: function(data, status) {

8. if (status == "success") {

9. $("#div_test").html(data);

10. }

11. }

12. });

13. }

後臺控制器方法

 

1. /// <summary>

2. /// 多個參數

3. /// </summary>

4. /// <param name="Id"></param>

5. /// <param name="Name"></param>

6. /// <param name="CreateTime"></param>

7. /// <returns></returns>

8. [HttpGet]

9. public string Get(int Id, string Name, DateTime CreateTime)

10. {

11. return String.Format("多個參數,{0},{1},{2}", Id, Name, CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));

12. }

 

4、一個實體對象參數

 

1. //Get實體對象作爲參數

2. var get_f4 = function() {

3. $.ajax({

4. type: "get",

5. url: "/api/Demo/GetModel",

6. data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },

7. success: function(data, status) {

8. if (status == "success") {

9. $("#div_test").html(data);

10. }

11. }

12. });

13. }

備註：到這裏有沒有發現多個參數和一個實體對象的請求方法是一樣的，假如兩個接收的方法都寫在同一個控制器裏面的話，路由是區分不出來要匹配那個方法處理，

所以要用自定義路由來區分，在WebApi裏面改方法名字是沒有用的。

後臺控制器方法

 

1. /// <summary>

2. /// 一個實體對象參數

3. /// </summary>

4. /// <param name="oData"></param>

5. /// <returns></returns>

6. [HttpGet]

7. [Route("GetModel")]

8. public string Get([FromUri]TbCharging oData)

9. {

10. return String.Format("一個實體對象參數，{0},{1},{2},{3}", oData.Id, oData.Name, oData.Des, oData.CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));

11. }

備註：在使用Get傳遞實體對象參數的時候要注意，因爲Get方式的時候參數是寫在url的，所以我們在後臺用[FromBody]是拿不到實體參數的，需要寫[FromUri]才行。

Post方式

Post方式我們一般用來做增、刪、改操作。在WebApi中Post僅僅用來做增加操作，修改用Put，刪除用Delete。這些在新建模板的時候就自動爲我們生成了。

還有要提一下的是Post只能傳遞一個參數，如果需要多個參數的時候我們需要把它們合併成一個擴展對象，當做對象來傳遞。

在後臺接收的時候我們需要在參數列表裏面寫上[FromBody]因爲Post方式的參數就不在Url裏面了。

1、一個參數

1. //Post一個參數

2. var post_f1 = function() {

3. $.ajax({

4. type: "post",

5. url: "/api/Demo",

6. data: { "": "Jim" },

7. //data: "=Jim", //兩種寫法，其他寫法獲取不到值

8. success: function(data, status) {

9. if (status == "success") {

10. $("#div_test").html(data);

11. }

12. }

13. });

14. }

 

注意：在寫參數的時候我們不能把參數寫成 data:{"name":"Jim"} 這種方式，因爲在後臺是拿不到值的。

後臺控制器方法

 

1. /// <summary>

2. /// 一個參數

3. /// </summary>

4. /// <param name="name"></param>

5. /// <returns></returns>

6. public string Post([FromBody]string name)

7. {

8. return "一個參數，" + name;

9. }

2、一個實體對象參數

 

1. //Post一個對象（Post不能提交多個參數，只能將多個參數封裝成一個對象）

2. var post_f2 = function () {

3. var postdata = { Id: "1", Name: "Jim", CreateTime: "1988-09-11" };

4. $.ajax({

5. type: "post",

6. url: "/api/Demo/PostAdd",//多個post的時候，路由會匹配不到，所以要自定義路由

7. //data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },

8. data: postdata,

9. success: function (data, status) {

10. if (status == "success") {

11. $("#div_test").html(data);

12. }

13. }

14. });

15. }

後臺控制器方法

 

1. /// <summary>

2. /// 一個對象

3. /// </summary>

4. /// <param name="oData"></param>

5. /// <returns></returns>

6. [HttpPost]

7. [Route("PostAdd")]

8. public object Post([FromBody]TbCharging oData)

9. {

10. var strName = String.Format("一個對象，{0},{1}", oData.Id, oData.Name);

11. return strName;

12. }

備註：這裏參數列表最好寫上[FromBody]，雖然不寫也能拿到值。

3、一個數組參數

 

1. //Post數組作爲參數

2. var post_f3 = function () {

3. var arr = ["1", "2", "3", "4"];

4. $.ajax({

5. type: "post",

6. url: "/api/Demo/PostArray",

7. contentType: 'application/json',

8. data: JSON.stringify(arr),

9. success: function (data, status) {

10. if (status == "success") {

11. $("#div_test").html(data);

12. }

13. }

14. });

15. }

這裏我們說一下contentType和dataType。

contentType 

發送信息至服務器時內容編碼類型。假如你不寫的話，默認值是: "application/x-www-form-urlencoded"。

dataType

預期服務器返回的數據類型。

如果我們Post提交的是json參數，最好就寫上 contentType: 'application/json'

後臺的控制器方法

 

1. /// <summary>

2. /// 數組作爲參數

3. /// </summary>

4. /// <param name="ids"></param>

5. /// <returns></returns>

6. [HttpPost]

7. [Route("PostArray")]

8. public object Post(string[] ids)

9. {

10. return String.Format("{0},{1},{2}", ids[0], ids[1], ids[2]);

11. }

4、實體集合參數

 

1. //Post對象集合，多個相同對象(多個不同對象的時候可以將多個對象封裝成一個擴展對象)

2. var post_f4 = function () {

3. var arr = [

4. { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },

5. { Id: "2", Name: "Lilei", CreateTime: "1990-12-11" },

6. { Id: "3", Name: "Lucy", CreateTime: "1986-01-10" }

7. ];

8. $.ajax({

9. type: "post",

10. url: "/api/Demo/PostMulti",//多個post的時候，路由會匹配不到，所以要自定義路由

11. contentType: 'application/json',

12. data: JSON.stringify(arr),

13. success: function (data, status) {

14. if (status == "success") {

15. $("#div_test").html(data);

16. }

17. }

18. });

19. }

後臺的控制器方法

 

1. /// <summary>

2. /// 對象集合

3. /// </summary>

4. /// <param name="lstCharging"></param>

5. /// <returns></returns>

6. [HttpPost]

7. [Route("PostMulti")]

8. public object Post([FromBody]List<TbCharging> lstCharging)

9. {

10. return String.Format("{0},{1}", lstCharging[0].Name, lstCharging[1].Name);

11. }

自定義路由

使用場景：用於方法重載，忽略方法名，自定義url

使用步驟：

1、在控制器類上方加入一個標記

 

1. [RoutePrefix("api/Demo")]

2. public class DemoController : ApiController

3. {}

 

2、在方法中加入路由標記

 

1. /// <summary>

2. /// 數組作爲參數

3. /// </summary>

4. /// <param name="ids"></param>

5. /// <returns></returns>

6. [HttpPost]

7. [Route("PostArray")]

8. public object Post([FromBody]string[] ids)

9. {

10. return String.Format("{0},{1},{2}", ids[0], ids[1], ids[2]);

11. }

備註：上面的api/Demo和PostArray可以自己定義名字。像我這樣寫就可以直接用 url:"/api/Demo/PostArray"來訪問了。