# 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
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
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
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
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->网络->看请求参数与后台的对象比较