2016-06-07 3 views
-1

저는 Node.js를 처음 사용하며, ajax를 통해 비동기 적으로 jsonp 데이터를 가져 와서 검색된 내용을 그래프로 표시하는 메소드를 작성했습니다. 일반 응용 프로그램에서와 마찬가지로jsonp 데이터를 생성하고 전달할 수 없습니다.

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); 
    } 
} 

, 내가 외부 웹 서비스를 통해 가져온 실제 데이터를 전달하려는 : 포함 (이 경우 productsData.js) 정적 JS 파일에 대한 URL 포인트 JSONP 데이터를 할 때이 방법은 잘 작동합니다. 특정 웹 서비스에서 데이터를 검색하는 다음 js 파일 (data-client.js)을 만들었습니다. 호출이 브라우저 기반 일 때, 데이터는 정상적인 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 값을 대체하는 것이다

번째 단계는 데이터 client.js로 대체하는
url: 'http://localhost:3000/products/data/'+productId, 

:

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]});" 

누군가가 말해 주실 수 있습니까? 나는 매우 감사 할 것입니다.

답변

2

Express를 사용중인 것 같습니다.

jsonp()은 완전한 응답이 포함 된 문자열이 아니라 원시 데이터가 전달 될 것으로 예상됩니다. 또한 쿼리 문자열에서 콜백 이름을 읽을 수 있습니다. jQuery가 전달하면 콜백 이름이 생성됩니다.

  • GET :

    그래서 할 수있는 첫 번째 일은 여기

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

    변경은이 콜백 이름이 클라이언트에서 제대로

    통과 할 수 있도록 클라이언트 측 코드를 수정하는 것입니다 type을 지정할 필요가 없으므로 기본값 (JSONP의 경우에만)입니다.

  • 데이터를 쿼리 문자열이 아닌 URL 경로 부분으로 전달하고 있습니다. 사용하지 않는 data 속성을 삭제하십시오.
  • jsonp 속성은 콜백 이름을 재정의하는 데 사용됩니다. 그건 해롭고, 그러지 마라. (마찬가지로, jsonpCallback을 지정하지 마라.) jQuery가 생성하고 쿼리 문자열에 추가합니다.
  • JSONP를 다루는 경우 JSON이 아닌 인 을 데이터 유형으로 지정하십시오.
  • 수동으로 사용자 고유의 전역을 만들지 마십시오. 함수를 done으로 전달하고 jQuery로 하여금 콜백과 일치하는 생성 된 이름으로 전역화하도록합니다.서버

그냥 당신이 jsonp()로 다시 보낼 데이터 구조를 전달합니다.

res.jsonp(response); 

콜백 이름은 Express가 쿼리 문자열에서 읽습니다.

+0

쿠엔틴, 정말 고마워! – Anto

관련 문제