当前位置: 首页 > 面试题库 >

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

穆歌者
2023-03-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的实现。

谢谢!


问题答案:

为了使’data’事件在node.js服务器端触发,您必须对数据进行POST。也就是说,“数据”事件仅响应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的异步特性-
服务器在接收数据块之间执行其他工作。



 类似资料:
  • 问题内容: 我正在尝试通过一个请求将数据从一个node.js服务器发送到另一个node.js服务器。我在“客户端” node.js中执行的操作如下: 该块或多或少是从node.js网站获取的,因此应该正确。我唯一看不到的是如何在变量中包括用户名和密码以进行实际登录。这是我处理服务器node.js中的数据的方式(我使用express): 如何将这些和字段添加到变量中以使其登录? 谢谢 问题答案: 发

  • 问题内容: 关于此问题: 将cookie从一个请求传输/传递到nodejs /protractor中的另一个请求 我又拿了一个 我如何查看通过nodejs执行的完整请求(标头+正文)? 问题答案: 是的,您可以…您可以从完整的响应正文访问完整的请求- 我有一个如下所示的通用完整响应结构 您可以通过如下代码访问

  • 问题内容: 我想使用Android将数据发送到我的php页面。我该怎么做? 问题答案: 您可以使用AndroidHttpClient进行GET或POST请求: 创建一个AndroidHttpClient来执行您的请求。 创建一个HttpGet或HttpPost请求。 使用setEntity和setHeader]方法填充请求。 对您的请求使用客户端上的execute方法之一。

  • 我一直在做这个项目,其中一个部分包括从Raspberry向我的服务器发送一些数据。但它不能正常工作,我不知道为什么。我试图通过删除“urllib2”并使用“request”来修复错误。但徒劳的是,一切都没有改变。如果有人能帮助我,我会非常感激的。谢谢! PHP代码: python代码:

  • 在我的应用程序中,我试图将数据从我的发送到一个名为的服务。这是我的以下代码: MainActivity.class: BGS服务。课程: 但我没有在服务类中获取数据。以下是我得到的错误: 02-25 09:05:41.166:E/AndroidRuntime(2633): JAVAlang.RuntimeException:无法启动活动 组件信息{com.microapple.googleplac

  • 我有姜戈问题。我想将来自浏览器或django服务器上的业务逻辑的数据发送到另一个django服务器或只是同一服务器但不同端口来处理请求。我该怎么办?我试着用套接字来实现,但似乎不起作用。