如何编写包含两段POST数据的AJAX请求

所以基本上我试图发送WebGL帧/截图到服务器，这可能会保存这些帧到硬盘驱动器，所以我将能够合并这些保存帧到视频文件。我发现:从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

接收器服务器端代码由Joe Turner给出(这是在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}
                                });
            ...
            ...

例如，让我们看看这个实验:

Three.js基本示例

我在上面的实验中修改了这段代码:

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

但是仍然看不到任何已保存的图像文件