保存对代码的热爱,并保存怀疑态度
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 版权协议,转载请附上原文出处链接和本声明。