zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    二叉排序树的最低公共祖先
    [jobdu]树中两个结点的最低公共祖先
    [jobdu]用两个栈实现队列
    [leetcode]Balanced Binary Tree
    [jobdu]从尾到头打印链表
    [leetcode]Flatten Binary Tree to Linked List
    [leetcode]Unique Binary Search Trees
    hdu 4059
    hdu 3972 1 M possible
    CF 317D Game with Powers
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794615.html
Copyright © 2011-2022 走看看