前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP</title>
</head>
<body>
</body>
<script type="text/javascript">
/* 封装一个 JSONP 的 交互类 */
var JSONP = (function () {
/**
* @param url => 访问的地址
* @param cbKey => 回调函数的名称, 服务端接收的字段
* @param json => 传给后台的数据, 一个单层的 json 对象
* @param callBack => 回调函数
*/
var $ = {};
$.GetJson = function (url, cbKey, json, callBack) {
/* 获取一个不会重复的 JSONP 回调名称, 并将该名称注入到类中实现一个方法 */
var cbValue = "json" + Math.random().toString(16).substr(2);
$[cbValue] = function (res, id) {
var domObj = document.getElementById(id.split(".")[1]).remove(0);
callBack(res);
};
/* 拼接请求地址 */
url = url + "?" + cbKey + "=JsonP." + cbValue;
for (var key in json) {
url += "&" + key + "=" + json[key];
}
/* 拼接 script 标签 并写入文档对象 */
var script = ‘<script id="‘+ cbValue +‘" src="‘+ url +‘"><\/script>‘;
document.write(script);
};
return $;
})();
/* 调用 JSONP 交互类的方法 */
JSONP.GetJson("http://localhost/JsonP/Index", "cb", {id: 1}, function (res) {
console.log(res);
});
</script>
</html>
后端代码 => 基于 KOA 框架
// 引入外部依赖
let Router = require("koa-router");
// 实例化一个子路由
let router = new Router();
// 这里写业务逻辑
router.get("/Index", async (ctx) => {
// 接收前端传过来的回调方法
let callback = ctx.query.cb;
// 一番业务逻辑之后的返回值
let result = {
id: ctx.query.id,
};
ctx.type = "text/javascript"; // 设置输出为 JavaScript 文件
/**
* 返回给前端的数据格式
* 前端传递的回调方法名( 返回给前端的数据格式, 前端传递的回调方法名 )
* 如: cb( {id: 1}, cb )
*/
ctx.body = `${callback}(${JSON.stringify(result)}, "${callback}")`;
});
// 对外暴露模块
module.exports = router;
时间： 2024-11-10 08:16:56