vue项目中使用jsonp方法

jsonp虽然是一项古老的技术，但是有时候没它不行，项目里面有个插件提供的就是使用jsonp的方式回调，所以总结一下jsonp的使用方法。

第一种，直接使用jquery提供的jsonp方法，我这里使用的是jquery的3.6.0版本，如下：

npm install -S [email protected]

然后代码里面：

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)
		}
	})

以上，打完收工！