2014-12-05 58 views
1

我在解析序列化的JSON Ajax獲取請求時發生問題(使用jQuery $ .ajax)發送到我的express.js 4服務器。作爲JSON請求發送的數據由數據表生成。express.js 4來自GET請求的JSON解析問題(來自數據表的請求數據)

這裏是我開始對客戶端

$(document).ready(function() { 
    $('#example').dataTable({ 
     "bServerSide": true, 
     "fnServerData": function (sSource, aoData, fnCallback) { 
      $.ajax({ 
       "dataType": 'json', 
       contentType: 'application/json', 
       "type": "GET", 
       "url": "http://localhost:3000/ajax/phenotypes/withOrg/like/datatables/", 
       "data": aoData, 
       "success": fnCallback, 
       "error": function() { 
        alert('have some problem'); 
       } 
      }); 
     }     
    }); 
}); 

當我在布勞爾數據表加載此代碼生成以下GET請求URL(到服務器):

GET /ajax /表型/ withOrg/like/datatables /?draw = 1 & columns =%5Bobject + Object%5D%2C%5Bobject + Object%5D%2C%5Bobject + Object%5D%2C%5Bobject + Object%5D%2C %5Bobject + Object%5D%2C%5Bobject + Object%5D & order =%5Bobject + Object%5D &開始= 0 &長度= 10 &搜索=%5Bobject +對象%5D

或以解碼形式(從螢火蟲輸出)

columns [object Object],[object Object],[object Object],[object Object],[object Object],[object Object] 
    draw 1 
    length 10 
    order [object Object] 
    search [object Object] 
    start 0 

所以我發送

$(document).ready(function() { 
      $('#example').dataTable({ 
       "bServerSide": true, 
       "fnServerData": function (sSource, aoData, fnCallback) { 
        var myData = JSON.stringify(aoData); 
        $.ajax({ 
         "dataType": 'json', 
         contentType: 'application/json', 
         "type": "GET", 
         "url": "http://localhost:3000/ajax/phenotypes/withOrg/like/datatables/", 
         "data": myData, 
         "success": fnCallback, 
         "error": function() { 
          alert('have some problem'); 
         } 
        }); 
       }     
      }); 
     }); 
前序列化的數據

這裏是從數據表生成的GET參數:

GET /ajax/phenotypes/withOrg/like/datatables /?[{%22name%22:%22draw%22,%22value%22:1},{%22name%22:%22columns%22,%22value% 22:[{%22data%22:0,%22name%22:%22%22%22searchable%22:真,%22orderable%22:真,%22search%22:{%22value%22:%22%22 ,%22regex%22:假}},{%22data%22:1,%22name%22:%22%22%22searchable%22:真,%22orderable%22:真,%22search%22:{%22value %22:%22%22%22regex%22:假}},{%22data%22:2,%22name%22:%22%22%22searchable%22:真,%22orderable%22:真,% 22search%22:{%22value%22:%22%22%22regex%22:假}},{%22data%22:3,%22name%22:%22%22%22searchable%22:真,% 22orderable%22:真,%22search%22:{%22value%22:%22%22%22regex%22:假}},{%22data%22:4,%22name%22:%22%22% 22searchable%22:真,%22orderable%22:真,%22search%22:{%22value%22:%22%22%22regex%22:假}},{%22data%22:5,%22name%22 :%22%22%22searchable%22:真,%22orderable%22:真,%22search%22:{%22value%22:%22%22%22regex%22:假}}]},{%22name %22:%22order%22%22value%22:[ {%22column%22:0,%22dir%22:%22asc%22}]},{%22name%22:%22start%22%22value%22:0},{%22name%22:%22length%22 ,%22value%22:10},{%22name%22:%22search%22,%22value%22:{%22value%22:%22%22,%22regex%22:false}}] HTTP/1.1

解碼形式

(從螢火輸出,並採用免工具用的JSLint檢查在線美化,似乎是正確的!)

[ 
    { 
     "name":"draw", 
     "value":1 
    }, 
    { 
     "name":"columns", 
     "value":[ 
     { 
      "data":0, 
      "name":"", 
      "searchable":true, 
      "orderable":true, 
      "search":{ 
       "value":"", 
       "regex":false 
      } 
     }, 
     { 
      "data":1, 
      "name":"", 
      "searchable":true, 
      "orderable":true, 
      "search":{ 
       "value":"", 
       "regex":false 
      } 
     }, 
     { 
      "data":2, 
      "name":"", 
      "searchable":true, 
      "orderable":true, 
      "search":{ 
       "value":"", 
       "regex":false 
      } 
     }, 
     { 
      "data":3, 
      "name":"", 
      "searchable":true, 
      "orderable":true, 
      "search":{ 
       "value":"", 
       "regex":false 
      } 
     }, 
     { 
      "data":4, 
      "name":"", 
      "searchable":true, 
      "orderable":true, 
      "search":{ 
       "value":"", 
       "regex":false 
      } 
     }, 
     { 
      "data":5, 
      "name":"", 
      "searchable":true, 
      "orderable":true, 
      "search":{ 
       "value":"", 
       "regex":false 
      } 
     } 
     ] 
    }, 
    { 
     "name":"order", 
     "value":[ 
     { 
      "column":0, 
      "dir":"asc" 
     } 
     ] 
    }, 
    { 
     "name":"start", 
     "value":0 
    }, 
    { 
     "name":"length", 
     "value":10 
    }, 
    { 
     "name":"search", 
     "value":{ 
     "value":"", 
     "regex":false 
     } 
    } 
] 

現在的問題,這個字符串化的URL不能在快遞4被解析爲服務器端 我對此使用express4 req.query和url.parse方法:http://expressjs.com/api.html#req.query 然後嘗試解析接收JSON字符串與JSON.parse()來法

... 
var url = require('url'); 
... 

router.get('/withOrg/like/datatables/', function (req, res) { 
    console.log('getting json string via req.query'); 
    console.log(req.query); 
    console.log('output parsed json object using JSON.parse'); 
    console.log(JSON.parse(req.query)); 

    //another try 
    console.log('for stack overflows test 2'); 
    console.log(url.parse(req.url, true).query); 
    console.log('output parsed json object using JSON.parse'); 
    console.log(url.parse(req.url, true).query); 
}) 

兩個JSON字符串輸出的結果是,你可以在這裏看到和無法與JSON解析無效JSON。解析:

getting json string via req.query 

{ 「{ 「數據」:0, 「名」: 「」, 「搜索」:真實的, 「訂購」:真實的, 「搜索」:{ 「值」:」 「 」正則表達式「:假}},{ 」數據「:1, 」名「: 」「, 」搜索「:真實的, 」訂購「:真實的, 」搜索「:{ 」值「: 」「,」 正則表達式「:假}},{」 數據 「:2,」 名 「:」」, 「搜索」:真實的, 「訂購」:真實的, 「搜索」:{ 「值」: 「」, 「正則表達式」:假} },{ 「數據」:3, 「名」: 「」, 「搜索」:真實的, 「訂購」:真實的, 「搜索」:{ 「值」: 「」, 「正則表達式」:假}},{」數據 「:4,」 姓名 「:」」, 「搜索」:真 「訂購」:真, 「搜索」:{ 「值」: 「」, 「正則表達式」:假}},{ 「數據」:5 ,「name」:「」,「searchable」:true,「orderable」:true,「search」:{「value」:「」,「regex」:false}}': {'{「column」:0 ,「dir」:「asc」}':''}}

output parsed json object using JSON.parse 

getting json string via req.query 

{ 「{ 「數據」:0, 「姓名」: 「」, 「搜索」:真 「訂購」:真, 「搜索」:{ 「值」: 「」, 「正則表達式」:假}},{ 「數據」:1, 「名」: 「」, 「搜索」:真實的, 「訂購」:真實的, 「搜索」:{ 「值」: 「」, 「正則表達式」:假}},{ 「數據」:2, 「名」: 「」, 「搜索」:真實的, 「訂購」:真實的, 「搜索」:{ 「值」: 「」, 「正則表達式」:假}}, { 「數據」:3, 「名」: 「」, 「搜索」:真實的, 「訂購」:真實的, 「搜索」:{ 「值」: 「」, 「正則表達式」:假}},{ 「數據」 :4中, 「名稱」: 「」, 「搜索」:真 「訂購」:真, 「搜索」:{ 「值」: 「」, 「正則表達式」:假}},{ 「數據」:5「, name「:」「,」searchable「:true,」orderable「:true,」search「:{」value「:」「,」regex「:false}}':'{」column「:0, dir「:」asc「}':''}}

output parsed json object using JSON.parse 

當我試圖解析JSON字符串,我從JSON.parse

SyntaxError: Unexpected token o 
    at Object.parse (native) 
    at module.exports (/Users/xxx/yyy/routes/phenotypesAJAX.js:16:19) 
    at Layer.handle [as handle_request] (/Users/xxx/yyy/node_modules/express/lib/router/layer.js:82:5) 
    at next (/Users/xxx/yyy/node_modules/express/lib/router/route.js:100:13) 

得到錯誤這是快遞4的錯誤嗎? 我看不出問題在哪裏。在客戶端,序列化的數據表GET請求似乎有效(用JSLint檢查)。在express4服務器端,我找不到任何其他方式以不同的方式解析GET請求。

非常感謝你的幫助, 奧利弗

回答

0

我已經從快遞github上的錯誤追蹤系統發佈這一問題得到了答案。 獲得的經驗教訓: 我在想複雜,express.js請求方法不是特別爲特定的請求格式編寫的!他們只是使用發送給他們的數據格式而無需修改!

我第一次使用的方法:

req.query 

[..]只適用於標準的查詢字符串,這是key = value對, 您提供的網址不[..]

正確的方法來解決我的問題是:

url.parse(req.url).query 

返回一個比必須手動解碼的URL的完整參數字符串:

obj = JSON.parse(decodeURIComponent(query)) 

以下是完整的解釋: https://github.com/strongloop/express/issues/2460