06 spring boot入门——AJAX请求后台接口，实现前后端传值

需求描述

        通过上一篇文章，我们实现了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