js封装jsonp

  • Post author:
  • Post category:其他



保存对代码的热爱,并保存怀疑态度


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>



版权声明:本文为dergfg原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。