ajax调用api实现异步后端交互

在 resources/static 目录下新建 ajax-test.html

写两个接口请求，给两个单击事件

<div class="card-body">
    <input type="text" id="info" class="form-control" placeholder="请输入info值">
    <h6 class="card-title">接口1返回数据如下：</h6>
    <p class="card-text" id="test1"></p>
    <a href="#" class="btn btn-primary" onclick="requestTest1()">发送请求1</a>
</div>

<div class="card-header">
    <h5 class="m-0">接口测试2</h5>
</div>
<div class="card-body">
    <h6 class="card-title">接口2返回数据如下：</h6>
    <p class="card-text" id="test2"></p>
    <a href="#" class="btn btn-primary" onclick="requestTest2()">发送请求2</a>
</div>

引入cdn jquery

<script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>

script里面写两个方法，之后根据点击事件分别定义两个事件触发的 js 方法：requestTest1() 和 requestTest2()，在方法中分别使用 Ajax 向后端发送请求，在请求成功后将响应结果赋值到对应的 div 中

<script type="text/javascript">
    function requestTest1(){
        var info= $("info").val();
        $.ajax({
            type:"GET",//方法类型
            dataType:"text",//预期服务器返回类型
            url:"api/test1?info"+info,
            contentType:"application/json; charset=utf-8",
            success:function (result){
                $("#test1").html(JSON.stringify(result));
            },
            error:function (){
                $("#test1").html("接口异常，请联系管理员");
            }

        });
    }
    function requestTest2(){
        $.ajax({
            type:"GET",
            dataType: "text",
            url: "api/test2",
            contentType: "application/json; charset=utf-8",
            success:function (result){
              $("#test2").html(JSON.stringify(result))
            },
            error:function (){
                $("test2").html("接口异常，请联系管理员");
            }
        });
    }
</script>

方法一中会首先获取用户在 input 框中输入的字段，之后将其拼接到请求的 URL 中，最后发送 Ajax 请求并完成回调，方法二中也是类似，用户点击发送请求的按钮后，会触发 onclick 点击事件并调用 requestTest2() 方法，在请求完成后进入 success 回调方法，并将请求结果的内容放到 div 中显示。

后端接口实现
建包entity
建user类

package cn.xiaozhang.ajax.entity;

public class User {
    private Integer id;
    private String name;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    private String password;

}

建包，controller在下面
建类RequestTestController类

package cn.xiaozhang.ajax.controller;
import cn.xiaozhang.ajax.entity.User;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/api")
public class RequestTestController {
    @RequestMapping(value = "/test1",method = RequestMethod.GET)
    public String test1(String info){
        if (StringUtils.isEmpty(info)|| StringUtils.isEmpty(info)){
            return "请输入info的值！";
        }
        return "你输入的内容是："+info;
    }
    @RequestMapping(value = "/test2",method = RequestMethod.GET)
    public List<User> test2(){
        List<User> users=new ArrayList<>();
        User user1 = new User();
        user1.setId(1);
        user1.setName("十一");
        user1.setPassword("12121");
        User user2 = new User();
        user2.setId(2);
        user2.setName("十二");
        user2.setPassword("21212");
        User user3 = new User();
        user3.setId(3);
        user3.setName("十三");
        user3.setPassword("31313");
        users.add(user1);
        users.add(user2);
        users.add(user3);
        return users;
    }
}

最后启动项目的时候，我直接从上一个项目拿过来的pom.xml。发现运行的时候报错，最后踩坑，发现pom.xml如果没有用的依赖一定要去掉springboot调用ajax，需要删掉这个依赖，可能没有用到jdbc。
不删掉运行报错