ajax+Jsonp跨域请求（简单实现+踩坑）

最新推荐文章于 2024-04-09 10:00:00 发布

.玄之又玄.

最新推荐文章于 2024-04-09 10:00:00 发布

阅读量1.4k

点赞数

文章标签： ajax json javascript

本文链接：https://blog.csdn.net/qq_41033385/article/details/122137757

版权

搞两个SpringMVC项目模拟两台服务器跨域请求：
请求端代码：

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#but1").click(function () {
                $.ajax({
                    type: "get",
                    async: false,
                    url: 'http://localhost:8081/producer/user/getJsonp1.do',
                    dataType: "jsonp",
                    jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
                    success: function (json) {
                        alert(json[0].name);
                    }
                })
            });

            $("#but2").click(function () {
                $.ajax({
                    url: 'http://localhost:8081/producer/user/getJsonp2.do',
                    type: "get",
                    dataType: "jsonp",
                    jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
                    success: function (json) {
                        alert(json.name);
                    },
                    error: function () {
                        alert('Error');
                    }
                });
            });

            $("#but3").click(function () {
                $.ajax({
                    url: 'http://localhost:8081/producer/user/getJsonp3.do',
                    type: "get",
                    dataType: "jsonp",
                    jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
                    success: function (json) {
                        alert(json.name);
                    },
                    error: function (json) {
                        console.log(json);
                    }
                });
            });
        })
    </script>
</head>
<body>

<div id="div1"><h2>jsonp测试</h2></div>
<button id="but1">按钮1</button>
<br/><br/>
<button id="but2">按钮2</button>
<br/><br/>
<button id="but3">按钮3</button>

</body>
</html>

服务端代码：

package com.study.pojo;

/**
 * @ClassName Company
 * @Description
 * @Author hekunming
 * @Date 2021/12/24 9:37
 */
public class Company {
    private String address;
    private String email;
    private String name;
    private String phone;

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getName() {
        return name;
    }

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

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }
}

package com.study.controller;


import com.fasterxml.jackson.databind.util.JSONPObject;
import com.study.pojo.Company;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

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


@Controller
@RequestMapping("/user")
public class UserController {

    @RequestMapping("/getJsonp1.do")
    public void get(HttpServletRequest req, HttpServletResponse res) {
        res.setContentType("text/plain");
        String callbackparam = req.getParameter("callbackparam");//得到js函数名称
        try {
            res.getWriter().write(callbackparam + "([ { name:\"John\"}])"); //返回jsonp数据
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @RequestMapping("/getJsonp2.do")
    @ResponseBody
    public JSONPObject getJsonp(String callbackparam) {
        Company company = new Company();
        company.setAddress("上海市");
        company.setEmail("123456@qq.com");
        company.setName("春风不度玉门关有限公司");
        company.setPhone("12345678912");
        return new JSONPObject(callbackparam, company);
    }

    //    @RequestMapping(value = "/getJsonp3.do",produces = "text/plain;charset=UTF-8")
    @RequestMapping(value = "/getJsonp3.do")
    @ResponseBody
    public Object getUserByToken(String callbackparam) {
        String jsonString="{\n" +
                "\t\"name\": \"zhangsan\"\n" +
                "}";
        String s = callbackparam + "(" + jsonString + ")";
        return s;
    }

}

这个是三个按钮都可以跨域成功！
在这里插入图片描述

到这里按理测试应该说是结束了；但是真正应用到我自己的项目中是却出现了问题。
我正式项目系统里代码：

  @RequestMapping(value = "/getJsonp3.do")
    @ResponseBody
    public Object getUserByToken(String callbackparam) {
        String jsonString="{\n" +
                "\t\"name\": \"zhangsan\"\n" +
                "}";
        String s = callbackparam + "(" + jsonString + ")";
        return s;
    }

在使用按钮3进行请求时，跨域成功但是解析跨域函数失败：
响应的函数被加上了双引号
在这里插入图片描述
自查后发现，响应的格式有问题

服务端改造：

@RequestMapping(value = "/getJsonp3.do", produces = "text/plain;charset=UTF-8")
    @ResponseBody
    public Object getUserByToken(String callbackparam) {
        String jsonString = "{\n" +
                "\t\"name\": \"zhangsan\"\n" +
                "}";
        String s = callbackparam + "(" + jsonString + ")";
        return s;
    }

就可以了！
在这里插入图片描述

在这里插入图片描述

具体为什么，暂时不知，肯定是能力不够。但是确实能解决问题，也是很奇葩。。。。。。。。。。。。。

.玄之又玄.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax+Jsonp跨域请求（简单实现+踩坑）

搞两个SpringMVC项目模拟两台服务器跨域请求：请求端代码：<!DOCTYPE html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><html><head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt
复制链接

扫一扫