最原生的jsonp请求

废话不多直接上代码，关键点都在注释中。

1、前端的html代码

注意观看sctipt标签路径的样子

//前端代码
<!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方法，需要的伙伴可以查看官方文档。

如需查看原生的jsop封装，请查看我另一篇文章https://blog.csdn.net/weixin_38888773/article/details/81974348

最原生的jsonp请求

猜你喜欢