最原生的jsonp请求

最新推荐文章于 2022-12-02 20:58:27 发布

sdj_beyond

最新推荐文章于 2022-12-02 20:58:27 发布

阅读量826

点赞数 2

分类专栏： node javaScript 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_38888773/article/details/81974173

版权

javaScript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

node

10 篇文章 0 订阅

订阅专栏

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

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请求

sdj_beyond

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
最原生的jsonp请求

废话不多直接上代码，关键点都在注释中。1、前端的html代码注意观看sctipt标签路径的样子//前端代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&amp
复制链接

扫一扫