废话不多直接上代码,关键点都在注释中。
1、前端的html代码
注意观看script标签路径的样子
//前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var response=""
//传递给后台的函数
function jsonp_callback_function(res) {
//从后台拿到的数据在res中
response = res;
// console.log(response);
}
</script>
<script src="http://localhost:3000/api?callback=jsonp_callback_function"></script>
<div id="dv"></div>
</body>
</html>
2、后端我是用express写了一个简单的接口
//后端express代码
var express = require("express")
var app = express()
// app.all('*', function (req, res, next) {
// //设置跨域
// res.header("Access-Control-Allow-Origin", "*");
// next();//不能省略
// })
app.get('/api', function (req, res) {
var data={
name: "王八",
age: 100
}
//返回的类型必须设置为javascript
res.type('text/javascript')
//前端路由中的参数获取,req.query。
console.log("query",req.query);
//这里的callback是前端定义的,req.query.callback是前端的函数名
//这里相当于将返回的数据放到函数的参数中,包裹成一个正常的函数,然后返回给前台
//这里的数据必须转化为字符串,否则传入一个对象浏览器无法解析
res.send(req.query.callback+'(' +JSON.stringify(data)+')')
})
app.listen(3000)
console.log("listen the port 3000");
记住最重要的一点,jsonp请求返回给前端的是一个可执行的js函数。
这是最最简单的jsonp请求,其实jquery已经封装好了一套ajax的jsonp方法,需要的伙伴可以查看官方文档。
如需查看原生的jsnop封装,请查看我另一篇文章封装原生jsonp请求_蜗牛的博客-CSDN博客_封装jsonp请求