# 1.url 传参(get 方式)


    //前端http请求写的是vue语法,要使用vue3语法的http请求,前端开发(常用示例)->http请求

   //前端,定义参数放在url上
   let id=1;
   let date='2024-01-02';
   let date2=null;//提交的值可能是null,后台一定要用可为null的对象
   let text='测试文字';
   let b=true;

   //注意前端url定义的参数与后台接口上的名字要一致
   const url=`api/表名/test?id=${id}&date=${date}&text=${text}&b=${b}&date=${date}&date2=${date2}`
   this.http.get(url,{},true).then(result=>{
   })

     //后台控制器上接口(注意前端url定义的参数与后台接口上的名字要一致)
    [Route("test"), HttpGet]
    public IActionResult Test(int id, DateTime date, DateTime? date2, string text, bool b)
    {
       return JsonNormal(new { message = "ok", status = true });
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 2.url 传参(post 方式,单个对象)

可以将参数同时放 url 与对象提交

  //前端http请求写的是vue语法,要使用vue3语法的http请求,前端开发(常用示例)->http请求
   //前端,定义参数放在url上
   let id=1;
   //注意前端url定义的参数与后台接口上的名字要一致
   const url=`api/表名/test?id=${id}`;

   //定义一个对象放在post参数
   const data={
      Code:"A0001",
      Name:"测试值",
      OrderDate:'2024-01-02'
   };
   //url上也可以同时放参数,
   this.http.post(url,data,true).then(result=>{
   })

    /******************后台控制器代码**************************/
    //后台控制器上接口(TestData前面不要忘了添加[FromBody])
    [Route("test"), HttpPost]
    public IActionResult Test([FromBody] TestData data, int id)
    {
     return JsonNormal(new { message = "ok", status = true });
    }

    //添加一个实体类
    public class TestData
    {
        public string Code { get; set; }
        public string Name { get; set; }
        public DateTime? OrderDate { get; set; }
    }

    //如果不想添加实体类,也可用字典接收
    // [Route("test"), HttpPost]
    //  public IActionResult Test([FromBody] Dictionary<string, object> data, int id)
    //  {
    //         //获取参数
    //         foreach (var item in data)
    //         {
    //             string field = item.Key;
    //             object value = item.Value;
    //         }
    //         return JsonNormal(new { message = "ok", status = true });
    //  }
    // ////或
    // public IActionResult Test([FromBody] Dictionary<string, string> data, int id)
    //  {
    //         //获取参数
    //         foreach (var item in data)
    //         {
    //             string field = item.Key;
    //             string value = item.Value;
    //         }
    //         return JsonNormal(new { message = "ok", status = true });
    //  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# 3.url 传参(post 方式,List 对象)

提交数组对象

  //前端http请求写的是vue语法,要使用vue3语法的http请求,前端开发(常用示例)->http请求
   //前端,定义参数放在url上
   let id=1;
   //注意前端url定义的参数与后台接口上的名字要一致
   const url=`api/表名/test`;

   //定义一个对象放在post参数
   const list=[{
      Code:"A0001",
      Name:"测试值1",
      OrderDate:'2024-01-02'
   },{
      Code:"A0002",
      Name:"测试值2",
      OrderDate:'2024-01-02'
   }];
   //url上也可以同时放参数,
   this.http.post(url,list,true).then(result=>{
   })

    /******************后台控制器代码**************************/
    
    //后台控制器上接口List<TestData> 前面不要忘了添加[FromBody])
    [Route("test"), HttpPost]
    public IActionResult Test([FromBody] List<TestData> list)
    {
      return JsonNormal(new { message = "ok", status = true });
    }

    //添加一个实体类
    public class TestData
    {
        public string Code { get; set; }
        public string Name { get; set; }
        public DateTime? OrderDate { get; set; }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 4.url 传参(post 方式,多个对象)

提交数组对象

   //前端配置
   const url=`api/表名/test`;
   //定义一个对象放在post参数
   const data={
       value:123, 
       status:true,
       data:{
         Code:"A0001",
         Name:"测试值1",
         OrderDate:'2024-01-02'
       }
   };
   //url上也可以同时放参数,
   this.http.post(url,list,true).then(result=>{
   })

   /******************后台控制器代码**************************/

    //后台控制器上接口TestInfo 前面不要忘了添加[FromBody])
    [Route("test"), HttpPost]
    public IActionResult Test([FromBody] TestInfo data, int id)
    {
        return JsonNormal(new { message = "ok", status = true });
    }

    //添加两个实体类
    public class TestInfo
    {
        public int? Value { get; set; }
        public bool Status { get; set; }

        public TestData Data { get; set; }
    }

    public class TestData
    {
        public string Code { get; set; }
        public string Name { get; set; }
        public DateTime? OrderDate { get; set; }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 5.其他参数

其他传参都类似,前端定义的什么后台就用一样的参数名或者对象接收

# 6.后台接不到参数对象为null

1、检查前端提交的参数与后台定义的参数、字段类型是否一致,如:
2、后台字段定义的是int类型,前端提交的是""空字符串,这种就接收不了参数
3、调试方式:前端浏览器按F12->网络->看请求参数与后台的对象比较

An image