[关键代码] 

$.ajax({
      url: "",
      type: "get/post",
      data: {arguments..},
      success(resp){},
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

url , type, data 是前端向后端发送请求的过程。url是访问的后端地址，data中的变量是方法的参数。 

传入参数后，后端会执行方法，返回结果是resp，格式是json格式，success(resp)表示成功返回。

vue3 使用 jquery ajax 和SpringBoot 后端进行数据交互_spring boot

 

【解决跨域问题】因为vue前后端分离，会出现跨域问题。

在后端中需要添加一个类解决跨域问题。

import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Configuration
public class CorsConfig implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException, ServletException, IOException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        String origin = request.getHeader("Origin");
        if(origin!=null) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        String headers = request.getHeader("Access-Control-Request-Headers");
        if(headers!=null) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) {

    }

    @Override
    public void destroy() {
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.

【例】模拟用户注册的过程：

传入username,password,confirmedPassword。如果三个值都是"123",返回{"error_message","success"}，否则返回{"error_message","error"}

@RestController
public class demo1 {
    @RequestMapping("/answer/")
  public Map<String,String>  ans(String username,String password ,String confirmedPassword){
     Map<String,String>map=new HashMap<>();
     if(username.equals("123")&&password.equals("123")&&confirmedPassword.equals("123")){
         map.put("error_message","success");
     }
     else{
         map.put("error_message","error");
     }
     return map;

  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

这里我server-port 配置的是3001，所以接口地址为：  localhost:3001/answer/

前端：

<template>
 
 <div>{{msg}}</div>
</template>
<script setup>
  import { ref } from 'vue'
  import $  from 'jquery'
 
 const msg = ref('')
  $.ajax({
      url: "http://127.0.0.1:3001/answer/",
      type: "get",
      data: {
          username: "123",
          password: "123",
          confirmedPassword: "123",
          },
                //resp是运行成功后的后台数据
          success(resp) {
                   if (resp.error_message === "success") {
                            msg.value = "123";        
                    } else {
                          msg.value = "456";
                    }
                },
            });
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.