js封装jsonp

最新推荐文章于 2022-03-19 21:11:41 发布

划水的乌贼

最新推荐文章于 2022-03-19 21:11:41 发布

阅读量265

点赞数

分类专栏： js 文章标签： javascript js html5 vue

本文链接：https://blog.csdn.net/dergfg/article/details/112585913

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

保存对代码的热爱，并保存怀疑态度
jsonp的原理：利用script标签不会触发浏览器的同源策略，及script标签将自身引用的数据，作为js代码执行的原理。配合函数的传参(执行时的参数发送给定义时的参数)，实现跨域数据的获取。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="tet1">
    <input type="text" name="" id="tet2">
    <input type="button" name="" id="btn">
</body>
<script>
    var tet1=document.getElementById("tet1");
    var tet2=document.getElementById("tet2");
    var btn=document.getElementById("btn");

    btn.onclick=function(){
        josnp("json.php",function(ok){   //路径名
            console.log(ok);
        },{
            df:tet1.value,   //后端的参数
            xc:tet2.value,
            qwe:"work",// 后端要执行的函数的名字
            cn:"qwe"   // 后端接收的函数的名字所在的字段名
        })
    }

    function josnp(url,cd,data){
        var str=""
        for(var i in data){
            str+=`${i}=${data[i]}&`;
            url=url+"?"+str+"__sd__="+Date.now();
        }


        var script=document.createElement("script");
            script.src=url;
            document.body.appendChild(script);
        
        window[data[data.cn]]=function(res){
            cd(res)
        }
    }
</script>
</html>