vue项目中使用jsonp方法
jsonp虽然是一项古老的技术,但是有时候没它不行,现在vue项目里面有个插件提供的就是使用jsonp的方式回调,所以总结一下jsonp的使用方法。
·
jsonp虽然是一项古老的技术,但是有时候没它不行,项目里面有个插件提供的就是使用jsonp的方式回调,所以总结一下jsonp的使用方法。
第一种,直接使用jquery提供的jsonp方法,我这里使用的是jquery的3.6.0版本,如下:
npm install -S jquery@3.6.0
然后代码里面:
import $ form 'jquery'
$.ajax({
url : 'http://127.0.0.1:8070/IntelligentReminderCaller/openPageGet?JsonBase64UrlEncode=' + dataUrlEncode,
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "jsonpcallback",
success : function(result) {
//返回结果在这里
//alert("through jsonp,receive data from other domain : " + result.ResultInfo);
alert("返回参数:" + result.ResultInfo);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert("status:" + XMLHttpRequest.status + ";readyState:" + XMLHttpRequest.readyState + ";textStatus:" + textStatus);
}
});
第二种,自己写一个jsonp的方法,然后调用,如下:
//封装jsonp方法
function jsonp(setting){
setting.data = setting.data || {}
setting.key = setting.key||'callback'
setting.callback = setting.callback||function(){}
//指定jsonp的回调方法名称
setting.data[setting.key] = 'jsonpcallback'
// jsonp回调方法
window.jsonpcallback = function(data){
setting.callback (data);
}
var script = document.createElement('script')
var query = []
for(var key in setting.data){
query.push( key + '='+ encodeURIComponent(setting.data[key]) )
}
script.src = setting.url + '&' + query.join('&')
document.head.appendChild(script)
document.head.removeChild(script)
}
//使用jsonp
jsonp({
url: 'http://127.0.0.1:8070/IntelligentReminderCaller/openPageGet?JsonBase64UrlEncode='+dataUrlEncode,
key: 'callback',
data: {},
callback: function(res){
//回调结果在这里
console.log(res)
}
})
以上,打完收工!
更多推荐
已为社区贡献11条内容
所有评论(0)