前端代码
<script type='text/javascript'>
后端返回直接执行的方法,相当于执行这个方法,由于后端把返回的数据放在方法的参数里,所以这里能拿到res。
cb = function(res) {
console.log(res)
}
</script>
<!-- 传入数据是msg,传入一个回调方式cb -->
<script src='http://xxxxx/api/jsonp?msg=helloWorld&cb=cb' type='text/javascript'></script>
服务端类似这样返回
static async jsonp(ctx) {
// 获取前端传入的参数
const query = ctx.request.query
// query.cb获取到前端传入的cb字段。
// 由于前端是用script标签发起的请求,
// 所以前端请求到的资源其实是这样的一段js代码 cb(服务端返回的数据),所以前端就直接执行了
ctx.body = `$ {query.cb} (服务端返回的数据)`
}
前端:
1.声明一个回调函数,把函数名当做参数值
2. 要传递给跨域请求的数据的服务器,函数形参要获取目标数据
3. 创建一个script标签把那个跨域的api数据接口地址赋值给script的src 还要在这个地址中向服务器传递该函数名
服务端:
4. 服务器接收到请求后需要再进行处理,把传递的参数名和它需要的数据拼接成一个字符串
5. 最后服务器把准备好的数据通过HTTP协议返回给客户端,客户端在调用执行声明的回调函数,对返回的数据进行操作