如何将 JQuery AJAX 请求中的数据发送到 Node.js 服务器答案

【问题标题】：How to send data from JQuery AJAX request to Node.js server如何将 JQuery AJAX 请求中的数据发送到 Node.js 服务器
【发布时间】：2012-11-08 19:56:14
【问题描述】：

我想做什么：
只需使用 jquery ajax 请求将一些数据（例如 json）发送到 node.js http 服务器。

由于某种原因，我无法在服务器上获取数据，因为它永远不会触发请求的“数据”事件。

客户端代码：

$.ajax({
    url: server,
    dataType: "jsonp",
    data: '{"data": "TEST"}',
    jsonpCallback: 'callback',
    success: function (data) {
        var ret = jQuery.parseJSON(data);
        $('#lblResponse').html(ret.msg);
    },
    error: function (xhr, status, error) {
        console.log('Error: ' + error.message);
        $('#lblResponse').html('Error connecting to the server.');
    }
});

服务器代码：

var http = require('http');
http.createServer(function (req, res) {

    console.log('Request received');

    res.writeHead(200, { 'Content-Type': 'text/plain' });
    req.on('data', function (chunk) {
        console.log('GOT DATA!');
    });
    res.end('callback(\'{\"msg\": \"OK\"}\')');

}).listen(8080, '192.168.0.143');
console.log('Server running at http://192.168.0.143:8080/');

正如我所说，它永远不会进入请求的“数据”事件。

评论：
1. 它记录“收到的请求”消息；
2. 响应很好，我可以在客户端处理它，有数据；

有什么帮助吗？我错过了什么吗？

提前谢谢大家。

编辑：
注释代码的最终版本，基于答案：

客户端代码：

$.ajax({
type: 'POST' // added,
url: server,
data: '{"data": "TEST"}',
//dataType: 'jsonp' - removed
//jsonpCallback: 'callback' - removed
success: function (data) {
    var ret = jQuery.parseJSON(data);
    $('#lblResponse').html(ret.msg);
},
error: function (xhr, status, error) {
    console.log('Error: ' + error.message);
    $('#lblResponse').html('Error connecting to the server.');
}
});

服务器代码：

var http = require('http');
http.createServer(function (req, res) {

    console.log('Request received');

    res.writeHead(200, { 
        'Content-Type': 'text/plain',
        'Access-Control-Allow-Origin': '*' // implementation of CORS
    });
    req.on('data', function (chunk) {
        console.log('GOT DATA!');
    });

    res.end('{"msg": "OK"}'); // removed the 'callback' stuff

}).listen(8080, '192.168.0.143');
console.log('Server running at http://192.168.0.143:8080/');

由于我想允许跨域请求，我添加了CORS 的实现。

谢谢！

【问题讨论】：

是什么导致 ajax 调用触发？
@Eric 我有一个按钮触发 ajax 调用。它工作正常，因为我在客户端上获得了响应数据。我的问题是在服务器上获取请求数据，我认为这是因为“数据”事件没有触发，我不知道为什么。

标签： node.js jquery request

【解决方案1】：

要在 node.js 服务器端触发“数据”事件，您必须发布数据。也就是说，“数据”事件仅响应 POST 数据。指定 'jsonp' 作为数据格式会强制执行 GET 请求，因为 jsonp 在 jquery 文档中定义为：

“jsonp”：使用 JSONP 加载到 JSON 块中。添加一个额外的“？callback =？”到 URL 的末尾以指定回调

以下是修改客户端以触发数据事件的方法。

客户：

<html>
<head>
    <script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>

<body>
    response here: <p id="lblResponse">fill me in</p>

<script type="text/javascript">
$(document).ready(function() {
    $.ajax({
        url: 'http://192.168.0.143:8080',
        // dataType: "jsonp",
        data: '{"data": "TEST"}',
        type: 'POST',
        jsonpCallback: 'callback', // this is not relevant to the POST anymore
        success: function (data) {
            var ret = jQuery.parseJSON(data);
            $('#lblResponse').html(ret.msg);
            console.log('Success: ')
        },
        error: function (xhr, status, error) {
            console.log('Error: ' + error.message);
            $('#lblResponse').html('Error connecting to the server.');
        },
    });
});
</script>

</body>
</html>

一些有用的行来帮助您调试服务器端：

服务器：

var http = require('http');
var util = require('util')
http.createServer(function (req, res) {

    console.log('Request received: ');
    util.log(util.inspect(req)) // this line helps you inspect the request so you can see whether the data is in the url (GET) or the req body (POST)
    util.log('Request recieved: \nmethod: ' + req.method + '\nurl: ' + req.url) // this line logs just the method and url

    res.writeHead(200, { 'Content-Type': 'text/plain' });
    req.on('data', function (chunk) {
        console.log('GOT DATA!');
    });
    res.end('callback(\'{\"msg\": \"OK\"}\')');

}).listen(8080);
console.log('Server running on port 8080');

节点端的数据事件的目的是构建主体 - 每个单个 http 请求都会触发多次，它接收到的每个数据块都会触发一次。这是 node.js 的异步特性——服务器在接收数据块之间做其他工作。

【讨论】：

感谢您回复@brion-finlay。实际上，我有一个触发 ajax 调用的按钮。我没有把它放在描述中，因为我有它的工作。问题是当请求到达服务器时，它不会触发“数据”事件。
我想我明白了——你的意思是服务器端的数据事件？问题是服务器端的数据事件发生在 POST 数据中，但在客户端中您指定了“jsonp”，这是一种用作 GET 回复的格式。我已经修改了答案以演示如何使用 POST 并触发数据事件。
就是这样！非常感谢，我错过了使用 JSONP 背后的概念，使用“util”也有很大帮助。除了您的示例之外，我还必须更改代码上的一些内容，我将对其进行描述更新。谢谢！