在客户端

Question

我是Node.js的新手，我创建了一个方法，该方法应该通过ajax异步获取jsonp数据并在图形中显示检索到的内容。当url指向包含jsonp数据的静态js文件（在本例中为productsData.js）时，此方法可以正常工作：

var express = require('express');
var router = express.Router();
var http = require('http');
var yaml_config = require('node-yaml-config');
var config = yaml_config.load(__dirname + '/../config/app-config.yml');


router.get('/data/:id', function (req, res, next) {
var opts = {
    host: config.alertService.host,
    port: config.alertService.port,
    method: 'GET',
    path: '/DataService/rest/receiveData/' + req.params.id
}

var reqGet = http.request(opts, function (dataResponse) {
    var responseString = '';
    dataResponse.on('data', function (data) {
        responseString += data;
    });
    var response = {x:[],y:[],z:[],t:[]};
    dataResponse.on('end', function () {
        var responseObject = JSON.parse(responseString);
        var accs = responseObject.data.listPCS;
        for(var i in accs){
            response.x.push(accs[i].accX);
            response.z.push(accs[i].accY);
            response.y.push(accs[i].accZ);
            response.t.push(accs[i].timestamp);
        }
        res.json(response);
    });
});
reqGet.end();
reqGet.on('error', function (e) {
    console.error(e);
});

});

module.exports = router;

与普通应用程序一样，我想传递通过外部Web服务获取的实际数据。我创建了以下js文件（data-client.js），它从特定的Web服务中检索数据。当呼叫基于浏览器时，数据将作为普通json成功获取，并在浏览器中相应显示。

url: 'http://localhost:3000/products/data/'+productId,

使用实时jsonp数据的第一步是将前一个url值替换为：

res.json(response);

第二步是在data-client.js中替换：

res.jsonp('jsonpCallback('+ JSON.stringify(response) + ');');

使用：

"jsonpCallback({\"x\":[1,1,1],\"y\":[2,1,4],\"z\":[0,0,9],\"t\":[1462790772000,1462790772010,1462790772020]});"

不知何故未提取数据。当我尝试通过浏览器获取数据时（即输入http://localhost:3000/data/ID937）但是我得到以下结果：

var bounds = groupBox.Bounds;
var displayRect = groupBox.DisplayRectangle;
var borderSize = new Size(bounds.Width - displayRect.Width, bounds.Height - displayRect.Height);

有人可以告诉我问题可能在哪里吗？我会非常感激。

Answer 1

看起来你正在使用Express。

jsonp()期望传递原始数据，而不是包含完整响应的字符串。它还希望从查询字符串中读取回调名称，如果你允许的话，jQuery将为你生成。

所以要做的第一件事就是修复客户端代码，使其正确传递回调名称

在客户端

$.ajax({
    url: 'http://localhost:3000/products/data/' + productId,
    dataType: 'jsonp', 
}).done(function(data) {
    populateData(data, destId);
});

这里的变化是：

GET是默认值（对于JSONP，仅限选项），因此无需指定type。
您将数据作为URL路径部分传递，而不是查询字符串。删除您未使用的data属性。
jsonp属性用于覆盖回调名称。那是有害的，不要这样做（同样，不要指定jsonpCallback）。 jQuery将为您生成一个并将其添加到查询字符串中。
如果您正在处理JSONP，请将指定为数据类型，而不是JSON。
不要手动创建自己的全局。将您的函数传递给done并让jQuery使其成为全局（使用生成的名称来匹配回调）。

在服务器上

只需将要发送回的数据结构传递回jsonp()。

res.jsonp(response);

将通过Express从查询字符串中读取回调名称。

无法创建和传递jsonp数据

1 个答案:

在客户端

在服务器上