無法創建和傳遞jsonp數據

Question

我是Node.js的新手，我創建了一種方法，該方法應通過ajax異步獲取jsonp數據並在圖中顯示檢索到的內容。 當url指向包含jsonp數據的靜態js文件（在本例中為productsData.js）時，此方法可以正常工作：

function loadChart(destElementId, alertId) {
        $.ajax({
            url:'http://localhost:3000/products/data/productsData.js',
            type: "GET",
            data: {prodId: prodId},
            jsonp: true,
            dataType : 'json',
            jsonpCallback: "jsonpCallback"
        });

    window["jsonpCallback"] = function(data) {

        populateData(data, destId);
    }
}

與普通應用程序一樣，我希望傳遞通過外部Web服務獲取的真實數據。 我創建了以下js文件（data-client.js），該文件從特定的Web服務檢索數據。 當調用基於瀏覽器時，數據將作為普通json成功獲取，並相應地顯示在瀏覽器中。

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;

使用實時jsonp數據的第一步是將以前的url值替換為：

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

第二步是替換為data-client.js：

res.json(response);

與：

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

不知何故不提取數據。 當我嘗試通過瀏覽器獲取數據時（即通過輸入http：// localhost：3000 / data / ID937 ），但是得到以下結果：

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

有人可以告訴我問題可能在哪里嗎？ 我將非常感謝。

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將從查詢字符串中讀取回調名稱。