springboot项目中AJAX的使用（AJAX前端请求数据，后台返回数据）

项目结构：

捕获我单位.PNG

后台控制层accesscontroller类负责业务逻辑处理

代码如下：

package com.example.demo;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.fasterxml.jackson.databind.util.JSONPObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;

@Controller
@RequestMapping("/text")
public class accesscontroller {
    @RequestMapping("/use")
    public String index(){
        return "AJAX";
    }
    @RequestMapping("/main")
    public String index2(){
        return "index";
    }
    @RequestMapping("/method")
    @ResponseBody
    public HashMap<String, Object> test(@RequestParam("username")String username, @RequestParam("password")String password){
        HashMap<String, Object> map=new HashMap<String, Object>();
        map.put("message1","红红火火恍恍惚惚或或或或");
        map.put("message2",username);
        map.put("message3",password);
        return map;
    }
}

需要注意的是加了@ResponseBody注解后返回的map对象自动被转换为json对象供前端调用

前端AJAX逻辑如下：

<!doctype html>

<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="/static/jquery.min.js" charset="utf-8"></script>
        <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $.ajax({
                    url:"/text/method",
                    type:"POST",
                    data:{
                        username:"哈哈哈",
                        password:"喂喂喂",
                    },
                    dataType:"json",
                    success:function (data) {
                        alert(data.message1);
                        if(data.message1=="红红火火恍恍惚惚或或或或")
                            window.location.href="/text/main";

                    },
                })

            })
        });


    </script>
</head>
<body>

<p th:text="'hello SpringBoot'">hello thymeleaf</p>
<button id="btn">按钮</button>
</body>
</html>

需要注意的是我引用了Jquery中的AJAX方法，url为请求地址，对应控制层映射关系，type为提交方式，data为数据，datatype为服务器返回数据类型，如果请求成功则执行success对应的方法，方法中的data为后台返回的数据，前端根据需要再进行跳转。