首页 > 其他分享> > jQuery中JSONP的实现过程

jQuery中JSONP的实现过程

2022-05-04 09:00:34 作者：互联网

jQuery 中的JSONP，也是通过<script>标签的src属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除<script>标签的方式，来发起JSONP 数据请求。

在发起JSONP请求的时候，动态向<header>中append一个<script>标签

在JSONP请求成功以后，动态从<header>中移除刚才append进去的<script>标签

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js文件/jquery-3.6.0.js"></script>
</head>

<body>
    <button id="btnJSONP">发起JSONP数据请求</button>
</body>
<script>
    $(function () {
        $('#btnJSONP').on('click', function () {
            $.ajax({
                url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?address=北京&location=顺义',
                dataType: 'jsonp',
                jsonpCallback: 'abc',
                success: function (res) {
                    console.log(res);
                }
            })
        })
    })
</script>

</html>

标签：jQuery,function,请求,实现,标签,移除,JSONP
来源： https://www.cnblogs.com/lxr0606/p/16218770.html