需求描述
通过上一篇文章,我们实现了GET、POST、PUT、DEL类型的接口示例,接下来我们想在前端通过ajax传参到后台接口,然后后台接口获取到这个值,并将它再返回给前端。
准备工作
1、首先我们要有一个用于测试的后台接口,在此处我们就用之前编写的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<String, Object> 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;
}
}
操作步骤
1、编写一份前端的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”,所以存在跨域,通过在接口上添加以下注解来解决跨域,如下:
2、重新运行前端代码,则可以看到后台接口成功返回了我们传过去的数据,如图:
附:
跨域处理参考连接:https://blog.csdn.net/saytime/article/details/74937204