.NET Core WebAPI post參數傳遞時後端的接收方式

.NET Core WebAPI post參數傳遞時後端的接收方式

1. 實體類
2. dynamic動態類型
3. JObject參數
4. 單值參數(字元串參數)

A.前端Post請求代碼

$.ajax({
           url: "/api/student/poststudent",
           type: 'POST',
           data:JSON.stringify({ name: "張三", age: 21 }),
           success:function () {
           },
           dataType: "json",
           contentType: "application/json"
       });

B.後端接收參數方式

1. 實體類

實體類是比較簡單的一種傳參方式，使用頻率非常高。

1. 添加實體類

    public class Student
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }

1. 後臺處理Post請求代碼

[HttpPost("{id}")]
public void PostStudent(Student student)
{
}

1. 接收參數結果
   

2.dynamic動態類型

1. 後臺處理Post請求代碼

[HttpPost("{id}")]
public void PostStudent(dynamic student)
{
    var name = student.name;//name大小寫與前端參數一致
    var age = student.age;
}

1. 接收參數結果
   

3.JObject參數

1. 引入Microsoft.AspNetCore.Mvc.NewtonsoftJson包
2. 添加引用 using Newtonsoft.Json.Linq;
3. 後臺處理Post請求代碼

[HttpPost("{id}")]
public void PostStudent(JObject student)
{
}

1. 接收參數結果
   

4.單值參數(字元串參數)

只能傳一個字元串參數，並且用單引號包一個雙引號，雙引號里為字元串內容！

1. 前端代碼與以上方式不同

$.ajax({
           url: "/api/student/poststudent",
           type: 'POST',
           data:'"name=張三,age=21"',//這裡是重點！用單引號包一個雙引號，雙引號里為字元串內容！
           success:function () {
           },
           dataType: "json",
           contentType: "application/json"
       });

1. 後臺處理Post請求代碼

[HttpPost("{id}")]
public void PostStudent([FromBody] string values)
{
}

WebApi 方法參數前加[FromBody]標識，表示該參數值應該從請求的Body中獲取，而不是從URL中獲取。不加[FromBody]標識後臺取不到參數值。

1. 接收參數結果
   

設置允許跨域

如果有跨域需求支持，請設置允許跨域。在Stateup.cs中添加如下代碼。

1. 修改ConfigureServices方法，添加代碼如下：

//允許一個或多個來源可以跨域
services.AddCors(options =>
{
      options.AddPolicy("CustomCorsPolicy", policy =>
      {
             // 設定允許跨域的來源，有多個可以用','隔開
             policy.WithOrigins("https://localhost:5000")//只允許https://localhost:5000來源允許跨域
             .AllowAnyHeader()
             .AllowAnyMethod()
             .AllowCredentials();
      });
});

1. 修改Configure方法，添加代碼如下：

app.UseCors("CustomCorsPolicy");