需求描述
通过上一篇文章，我们实现了GET、POST、PUT、DEL类型的接口示例，接下来我们想在前端通过ajax传参到后台接口，然后后台接口获取到这个值，并将它再返回给前端。
准备工作
首先我们要有一个用于测试的后台接口，在此处我们就用之前编写的POST接口示例，代码如下：
package net.xqwexample.mavendemo02.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RestController;
//测试http的post、put、del请求
@RestController
public class OtherController {
//用来定义一个保存输出的变量
private Map params= new HashMap<>();
@PostMapping('/v1/login')
public Object login(String id,String pwd) {
params.clear();
params.put('id', id);
params.put('pwd', pwd);
return params;
}
} 操作步骤
编写一份前端的ajax请求代码，在此处就省略了基本的HTML页面结构代码，直接贴js代码：
$.ajax({
type:'post',
url:'http://localhost:8080/v1/login',
data:{
id:'23',
pwd:'sssss',
f:'json'
},
dataType:'json',
async:false,
success:function (data) {
console.log(data);
},
error:function (e) {
console.log(e);
}
}) ;上述代码中通过ajax去请求后台的post接口，传的参数分别是id和pwg两个参数，如果请求成功则控制台打印出结果，如果失败则打印出失败信息。运行前端代码，打开控制台查看结果。
运行上述结果发现有跨域错误。因为我的前端代码运行在tomcat中，而我的代码运行地址则是“localhost:8080”，所以存在跨域，通过在接口上添加以下注解来解决跨域，如下：
重新运行前端代码，则可以看到后台接口成功返回了我们传过去的数据，如：
附：
文章为作者独立观点，不代表股票交易接口观点
股民评论