Vue中的前后端get和post方法传值
GET请求1、有时候会出现GET请求传值后端接收不到的情况,比如:前端传值// test方法,发送请求到后端export function Test(query) {return request({url: '/resources/tempStake/test',method: 'get',params: query})}// 导入到vue中import { Test } from "../tes
·
GET请求
1、有时候会出现GET请求传值后端接收不到的情况,比如:
- 前端传值
// test方法,发送请求到后端
export function Test(query) {
return request({
url: '/resources/tempStake/test',
method: 'get',
params: query
})
}
// 导入到vue中
import { Test } from "../test.js";
// 使用测试
var a = "aaa";
Test(a).then(res=>{console.log("sss",res);})
- 后端Controller中接收参数
@RequestMapping("/resources/tempStake")
public class RTempStakeController extends BaseController {
@GetMapping("/test")
public String testGet(String a) {
System.out.println(a);
return a;
}
}
结果就是:后端接收不到,再看浏览器的请求,结果传的参数不是一个完整的字符串,而是被当成了3个char字符
所以,我们改前端代码为
// 使用测试
var a = "aaa";
// 这里写成对象类型,表示传的是对象a
Test({a:a}).then(res=>{console.log("sss",res);})
再次测试,请求正确,返回值也传回来了,说明后端接收到了参数并返回了
- 如果前后端传的参数名称对应不上,可以用@RequestParam注解
// 比如我们前端是这样传的
var a = "aaa";
test({ccc:a}).then(res=>{ console.log("sss",res); })
// 后端就可以这样接收
@GetMapping("/test")
public String test(@RequestParam("ccc") String a) {
System.out.println(a);
return a;
}
Post请求
// post请求的话,前端用data
export function Test(data) {
return request({
url: '/test/test',
method: 'post',
data: data
})
}
// 后端直接写个实体类,字段对应前端中data的字段,然后加上@Requestbody注解就行了
@PostMapping("/test/test")
public Test add(@RequestBody Test test) {
return test;
}
更多推荐
已为社区贡献1条内容
所有评论(0)