Node.js返回JSON

幽默大师 發表於 2019-11-15 20:43:00

在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误，常用的解决办法就是在Ajax中使用JSONP。基于安全性考虑，浏览器会存在同源策略，然而<script/>标签却具有跨域访问数据的能力，这就是JSONP工作的基本原理。有关同源策略以及什么是JSONP，可以参考园子里的这篇文章http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html
　　在Node.js中实现JSONP非常简单，通过下面的代码我们从服务器返回并运行一个JavaScript函数，这个JavaScript函数已经在调用方提前被定义好了，于是当它被返回的时候就自动执行了。
<div class="cnblogs_code">
<pre>var express = require('express');
var router = express.Router();

router.get('/getinfo', function(req, res, next) {
var _callback = req.query.callback;
var _data = { email: 'example@163.com', name: 'jaxu' };
if (_callback){
 res.type('text/javascript');
 res.send(_callback + '(' + JSON.stringify(_data) + ')');
}
else{
 res.json(_data);
}
});

module.exports = router;</pre>
</div>
代码中必须规定从服务器返回数据的类型，代码res.type('text/javascript')被加在返回的数据之前用于告诉浏览器这是一段JavaScript代码。
　　前端页面通过JQuery调用：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp test</title>
<script src="/bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
<input type="button" value="click" id="btn">
<script type="text/javascript">
 $(function(){
 $('#btn').on('click', function(){
 $.get('http://anothersite/api/getinfo', function(d){
 console.log(d);
 }, 'jsonp');
 });
 });
</script>
</body>
</html></pre>
</div>
当然，如果使用express，则可以直接使用下面的代码：
<div class="cnblogs_code">
<pre>router.get('/getinfo',function(req,res,next) {
var _data = { email: 'example@163.com', name: 'jaxu' };
res.type('application/json');
res.jsonp(_data);
});</pre>
</div>
  
来源：https://www.cnblogs.com/qqhfeng/p/11869452.html

頁: [1]

琼殿技术论坛's Archiver

Node.js返回JSON