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

[关键代码]登录后复制$.ajax({url: "",type: "get/post",data: {arguments..},success(resp){},});1.2.3.4.5.6.url , type, data 是前端向后端发送请求的过程。url是...

学习辨是非

180人浏览 · 2024-08-24 03:45:09

学习辨是非 · 2024-08-24 03:45:09 发布

[关键代码]

$.ajax({
      url: "",
      type: "get/post",
      data: {arguments..},
      success(resp){},
});

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

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

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

【解决跨域问题】因为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() {
    }
}

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

传入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;

  }
}

这里我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>

原创作者: u_16969274 转载于: https://blog.51cto.com/u_16969274/11821292

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。