如何从JQuery AJAX请求发送数据到Node.js服务器

前端之家收集整理的这篇文章主要介绍了如何从JQuery AJAX请求发送数据到Node.js服务器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想做什么
只需将一些数据(例如json)发送到一个node.js http服务器,使用 jquery ajax请求.

由于某些原因,我无法设法在服务器上获取数据,因为它不会触发请求的“数据”事件.

客户端代码

$.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/');

正如我所说,它不会进入请求的“数据”事件.

注释:
它记录“收到请求”消息;
2.响应很好,可以在客户端处理数据;

任何帮助?我错过了什么吗?

提前谢谢大家.

编辑:
评论的最终版本的代码,基于答案:

客户端代码

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

服务器代码

var http = require('http');
http.createServer(function (req,{ 
        '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的实现.

谢谢!

解决方法

要在node.js服务器端启动“data”事件,您必须POST数据.也就是说,“数据”事件只响应POSTed数据.指定’jsonp’作为数据格式强制执行GET请求,因为jsonp在jquery文档中定义为:

“jsonp”: Loads in a JSON block using JSONP. Adds an extra “?callback=?” to the end of your URL to specify the callback

以下是您如何修改客户端以使数据事件触发.

客户:

<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",type: 'POST',// this is not relevant to the POST anymore
        success: function (data) {
            var ret = jQuery.parseJSON(data);
            $('#lblResponse').html(ret.msg);
            console.log('Success: ')
        },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,function (chunk) {
        console.log('GOT DATA!');
    });
    res.end('callback(\'{\"msg\": \"OK\"}\')');

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

节点侧的数据事件的目的是建立身体 – 每个单个http请求每次触发多次,每接收一个数据块.这是node.js的异步性质 – 服务器在接收数据块之间进行其他工作.

猜你在找的jQuery相关文章