JQuery的AJAX请求与后端springboot交互数据、记录跨源请求解决方案

最新推荐文章于 2021-11-09 23:12:15 发布

CharmDeer

最新推荐文章于 2021-11-09 23:12:15 发布

阅读量937

点赞数

分类专栏：前端三剑客详解文章标签： ajax jquery java SpringBoot 跨源请求

本文链接：https://blog.csdn.net/m0_57249797/article/details/119926535

版权

前端三剑客详解专栏收录该内容

9 篇文章 1 订阅

订阅专栏

就实现简单表单验证：

请添加图片描述
前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../JQuery/3.3.1/dist/jquery.min.js"></script>
    <script src="jsonp.js"></script>
    <style>
        #txtName{
            margin-right: 10px;
        }
        span{
            color: red;
        }
    </style>
    <script>
       $(function () {
            $('#txtName').blur(function () {
                $.get({
                    url:"http://localhost:8080/ajax/a1",
                    data:{
                        "name":$(this).val()//这个name必须和后端的名称一样
                    },
                    success:function (data) {
                        $('span').text(data)
                    }
                })
            })
       })
    </script>
</head>
<body>
<input type="text" id="txtName"><span></span>
</body>
</html>

关于JQuery的AJAX请求分析，在我的JQuery笔记中已经介绍了几种方法(有需要学习的我帮你们定位过去)：
https://blog.csdn.net/m0_57249797/article/details/119817107?spm=1001.2014.3001.5501#jquery07
然后就是后端代码SpringBoot：
启动类：

@SpringBootApplication
public class HelloWorldMainApplication {
    public static void main(String[] args) {
      
        SpringApplication.run(HelloWorldMainApplication.class,args);
    }
}

Controller类：

@RestController
@RequestMapping("/ajax")
public class AjaxController {
    @RequestMapping("/a1")
    //这个name必须和前端请求发送数据的name名称一样
    public void ajax(String name, HttpServletResponse response, HttpServletRequest request) throws IOException {
        
        if ("admin".equals(name)){
            response.getWriter().println("输入正确");
        }else {
            response.getWriter().println("输入错误");
        }
    }
}

这些都挺简单的，这里我主要是想记录一下这个问题：
在这里插入图片描述

跨源请求解决方案1：

添加以下代码，来设置相关响应头：

 		//response.setContentType("application/json;charset=UTF-8");
        response.setContentType("application/String;charset=UTF-8");
        //response.setContentType("text/plain;charset=UTF-8");
		//上面的代码为响应的数据类型设置代码
        response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("P3P", "CP=CAO PSA OUR");
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
            response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
            response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
            response.addHeader("Access-Control-Max-Age", "120");
        }

最终我封装成方法：

@SpringBootApplication
public class HelloWorldMainApplication {
    public static void main(String[] args) {
        SpringApplication.run(HelloWorldMainApplication.class,args);
    }
    public static void lan(HttpServletResponse response, HttpServletRequest request){
        //response.setContentType("application/json;charset=UTF-8");
        response.setContentType("application/String;charset=UTF-8");
        //response.setContentType("text/plain;charset=UTF-8");

        response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("P3P", "CP=CAO PSA OUR");
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
            response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
            response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
            response.addHeader("Access-Control-Max-Age", "120");
        }
    }
}

然后调用即可：

@RestController
@RequestMapping("/ajax")
public class AjaxController {
    @RequestMapping("/a1")
    public void ajax(String name, HttpServletResponse response, HttpServletRequest request) throws IOException {
        HelloWorldMainApplication.lan(response,request);//调用
        if ("admin".equals(name)){
            response.getWriter().println("输入正确");
        }else {
            response.getWriter().println("输入错误");
        }
    }
}

跨源请求解决方案2：

利用jquery的jsonp插件

跨源请求解决方案3：

写一个springMVC的拦截器

第一种够用了，其他的我懒得写看原文吧：

https://www.cnblogs.com/itmacy/p/6958181.html

CharmDeer

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery的AJAX请求与后端springboot交互数据、记录跨源请求解决方案

就实现简单表单验证：前端代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../JQuery/3.3.1/dist/jquery.min.js"></script> <script src="jsonp.js">&
复制链接

扫一扫