如何編寫包含兩段POST數據的AJAX請求？

Question

所以基本上我試圖發送WebGL幀/屏幕截圖到一個服務器，可以將這些幀保存到硬盤驅動器，這樣我就可以將這些保存的幀合併到視頻文件中。 我發現這一點： Exporting video from webgl

我不喜歡打擾你們用WebGL的相關細節......你應該知道，我想送兩個客戶端的內容唯一的JavaScript變量localhost node.js服務器。所以，這兩個客戶端變量如下：

  var frame = frame + 1; //this is the frame counter 
      var dataUrl = renderer.domElement.toDataURL("image/png"); //this is the encoded screenshot/frame 

接收服務器端代碼被喬特納給出的（這在node.js中運行）。 所以我的問題是：如何將上面提到的兩個變量的內容發送到這個node.js代碼？

var http = require('http'); 
var querystring = require('querystring'); 
var fs = require('fs'); 

// Override so we don't decode spaces, and mess up the base64 encoding 
querystring.unescape = function(s, decodeSpaces) { 
    return s; 
}; 

// Pad to follow the processing export format 
function pad(num) { 
    var s = "000" + num; 
    return s.substr(s.length-4); 
} 

http.createServer(function (request, response) { 
    request.content = ''; 
    request.addListener("data", function(data) { 
     request.content += data; 
    }); 

    request.addListener("end", function() { 
     if (request.content.trim()) { 
      request.content = querystring.parse(request.content); 
      var data = unescape(request.content['data']); 
      var frame = request.content['frame']; 
      // Remove data:image/png;base64, 
      data = data.substr(data.indexOf(',') + 1); 
      var buffer = new Buffer(data, 'base64'); 
      fs.writeFile('screen-' + pad(frame) + '.png', 
         buffer.toString('binary'), 'binary'); 
     } 
    }); 
    response.writeHead(200, { 
     'Content-Type': 'text/plain', 
     'Access-Control-Allow-Origin': '*', 
     'Access-Control-Allow-Headers': 'X-Requested-With' 
    }); 
    response.end(); 
}).listen(8080, "127.0.0.1"); 

我應該這樣做嗎？

  ... 
      ... 
      //WebGL related code 
      ... 
      ... 
          var frame = frame + 1; 
          var dataUrl = renderer.domElement.toDataURL("image/png"); 

           $.ajax({ 
            url: "http://127.0.0.1:8080", 
            type: "POST", 
            data: {"data": dataUrl, "frame": frame} 

           }); 
      ... 
      ... 

例如，讓我們看看這個實驗：

 pointLight.position.copy(camera.position); 

     progress += frameTime; 
     lastTimestamp = timestamp; 
     renderer.render(scene, camera); 
     stats.update(); 
     requestAnimationFrame(animate); 

向該：

 pointLight.position.copy(camera.position); 

     progress += frameTime; 
     lastTimestamp = timestamp; 
     renderer.render(scene, camera); 
     stats.update(); 
     requestAnimationFrame(animate); 

     var dataUrl = "data:image/png;base64,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"; 
     var frame = 10; 

     $.ajax({ 
       url: "http://127.0.0.1:8080", 
       type: "POST", 
       data: {"data": dataUrl, "frame": frame}  
     }); 

Three.js basic example

我在上述實驗中改變這一段代碼

但仍看不到任何保存的圖像文件。

Answer 1

你寫的代碼，只需要在其URL正確的協議（你失蹤「的http：//」）：

var frame = frame + 1; 
var dataUrl = renderer.domElement.toDataURL("image/png"); 

$.ajax({ 
     url: "http://127.0.0.1:8080", 
     type: "POST", 
     data: {"data": dataUrl, "frame": frame}  
}); 

從您發佈的代碼，你可以看到服務器已經解析請求，並提取您在POST發送兩個參數

if (request.content.trim()) {  
    request.content = querystring.parse(request.content); 
    var data = request.content['data']; 
    var frame = request.content['frame']; 
    //... 

任何你添加到$就POST請求可以通過名稱檢索調用

時

request.content['name'] 

只要確保您在客戶端和服務器代碼中使用的名稱相匹配即可。

此外，Node.js的代碼被接收逃脫的base64字符串，不使此功能工作

data.substr(data.indexOf(',') + 1); 

因爲「」字符轉義。

爲了解決這個只使用節點內置函數UNESCAPE上的數據串這樣

var data = unescape(request.content['data']);