通达信接口被暂停-06 spring boot入门 AJAX请求后台接口实现前后端传值

需求描述

通过上一篇文章，我们实现了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”，所以存在跨域，通过在接口上添加以下注解来解决跨域，如下：

重新运行前端代码，则可以看到后台接口成功返回了我们传过去的数据，如：

附：

文章为作者独立观点，不代表股票程序化软件自动交易接口观点