写在前面:jsonp为跨域请求的一种方式,依托于script的src属性,达到跨域的目的,只能发get请求
什么是跨域?不同的协议,不同的ip,不同的端口,只要是其中的一种都属于跨域请求。
首先用node起个服务
serve.js 代码如下
const express = require('express');
const fs = require('fs')
const app = express();
app.get('/call',function(req,res,next){
res.send("aaa(aaaa)");
})
app.get('/test',function(req,res){
var data = fs.readFileSync('./config.json').toString();
if(req.param('name') == 'test'){
var jsonp = "callback("+data+")";
res.send(jsonp);
}
})
var server = app.listen(8081,function(){
var host = server.address().address
var port = server.address().port
console.log("应用实例,访问地址为 http://%s:%s", host, port)
})
读取的文件是个简单的json文件
这里要说明的是,通过jsonp返回的虽然是字符串,但浏览器认为是可执行的js代码,所以需要定义一个函数名(这里是callback) ,在前端调用接口时需要传入: 路由,参数(可空),函数名
封装的处理请求的js文件
var const_url = "http://localhost:8081"
const inter = function(url,params,funname, callback){
url = const_url+url
if(!url) return;
if(params){
url +='?'
for(let index in params){
url = url +index+'='+params[index]+'&'
}
console.log(url)
}
var scriptDom = document.createElement('script');
scriptDom.src = url;
// 给script绑定个错误处理,如果出错进callback的error处理
scriptDom.onerror=function(e){
callback.error(e)
}
//正常执行会返回数据,这里直接执行返回的js代码
window[funname] = function(str){
callback.success(str);
delete window[funname]
}
document.body.appendChild(scriptDom);
}
export default inter;
接口有4个参数,url:请求接口的路由; params:参数;funname:后端定义的js执行函数名;callback:函数回调
vue组件调用封装js文件:
直接导入接口文件
import inter from '../request/request'
在button上绑定click事件调用函数,函数调用如下:
getdate(){
// window.aaa = function(str){
// console.log(str)
// }
// var scriptDom = document.createElement('script');
// scriptDom.src = "http://localhost:8081/call";
// document.body.appendChild(scriptDom);
inter("/test",this.params,"callback" ,{
success: function (res) {
console.log(res)
},
error: function (e) {
console.log(e)
}
})
}
参数是:
params:{ name:"test",age:12},
请求结果如下:
js动态加载:https://blog.csdn.net/h774140913/article/details/87968123
jsonp知识点:https://blog.csdn.net/hansexploration/article/details/80314948