Node.js - 提交表单

Posted 2023-03-03

【中文标题】Node.js - 提交表单

【英文标题】：Node.js - submit form

【发布时间】：2012-01-27 06:54:42

【问题描述】：

我使用 node.js 和 express。当我按下按钮（btnSend）时，我想通过 express 将数据发送到 node.js（不刷新页面）。如何使用 jQuery 发送数据？

<form action="/Send" method="post">
Username: 
<input type="text" name="user" id="txtUser" />
<input type="submit" value="Submit" id="btnSend" />
</form>

【问题讨论】：

这是题外话，但考虑用label tag包装“用户名：”和文本输入元素。它使表单更具语义和可用性。

【参考方案1】：

以下是您的 jQuery 应该是什么样子的粗略轮廓：

$("form").submit(function(e) 
    e.preventDefault(); // Prevents the page from refreshing
    var $this = $(this); // `this` refers to the current form element
    $.post(
        $this.attr("action"), // Gets the URL to sent the post to
        $this.serialize(), // Serializes form data in standard format
        function(data)  /** code to handle response **/ ,
        "json" // The format the response should be in
    );
);

此代码 sn-p 查找页面上的所有表单元素并侦听来自它们的提交事件。可以通过多种方式提交表单（例如单击提交按钮、按 Enter 等），因此为了可用性，最好直接监听提交事件，而不是监听提交按钮上的单击事件键.

当提交事件发生时，上面的代码首先通过调用e.preventDefault 来阻止默认浏览器操作（其中包括刷新页面）。然后它使用$.post 将表单数据发送到action 属性中指定的url。注意$.fn.serialize是用来序列化标准格式的表单数据的。

您的快速代码应如下所示：

var express = require('express')
  , app = express.createServer();

app.use(express.bodyParser()); // Automatically parses form data

app.post('/Send', function(req, res) // Specifies which URL to listen for
  // req.body -- contains form data
);

app.listen(3000);

express.bodyParser 上的文档有点稀疏，但经过一点code spelunking 之后，它看起来就像在封面下使用了node-querystring。

希望这会有所帮助！

【讨论】：

我无法启动客户端响应功能。 function(data) /** 处理响应的代码 **/ ，是否需要在客户端代码中添加 res.end() 之类的？

不，你不应该在客户端调用res.end - 只在服务器端。在 chrome 的开发控制台中，我会在网络选项卡中确保发布请求完成且没有错误。还要查看您的服务器端响应代码（即// req.body -- contains form data 函数中的代码）并确保您正确地结束了响应。希望对您有所帮助。

我能够缩小问题的范围，它与这个问题无关。由于某种原因，该应用程序在永久使用时无法找到 fs.appendfile，但在使用 nodemon 时它工作正常。