练习封装jsonp方法
<button>点我发送数据1</button>
<button>点我发送数据2</button>
//=> JS代码
<script>
let button1 = document.querySelectorAll('button')[0];
let button2 = document.querySelectorAll('button')[1];
function jsonp(options) {
// 动态创建script标签
var script = document.createElement('script');
// 拼接字符串
var params = '';
for (let key in options.data){
params += `&${key}=${options.data[key]}`;
}
console.log(params);
// 随机名字(防止window方法名覆盖)
var fnName = 'myJsonp'+Math.random().toString().replace('.','');
// 它不是一个全局函数,要把它变成全局函数
// 挂载到window中
window[fnName] = options.success;
// 为script标签添加src属性
script.src = options.url + `?callback=${fnName}${params}`;
// script标签追加到页面中
document.body.appendChild(script);
// 为script标签onload事件
script.onload = function () {
//=> 删除script标签
document.body.removeChild(script);
}
}
button1.onclick = function () {
jsonp({
url: "http://localhost:3001/test",
data:{
username:'jun',
age:16
},
success: function(data){
console.log('我是第一个按钮');
console.log(data);
}
})
}
// 两个按钮的挂载到window的方法不会冲突
button2.onclick = function () {
jsonp({
url: "http://localhost:3001/test",
success: function(data){
console.log('我是第二个按钮');
console.log(data);
}
})
}