使用 Express、Node 和 JQuery 提交表单

Posted 2023-03-07

【中文标题】使用 Express、Node 和 JQuery 提交表单

【英文标题】：Form submission with Express, Node, and JQuery

【发布时间】：2019-01-07 01:12:21

【问题描述】：

我对 html、express 和 node.js 非常陌生，这些技术是我目前用于 Web 应用程序的技术，但我在提交表单时遇到了困难。

这是我的表单（它是通过脚本创建的，因为其字段因不同因素而异）：

$FormContainer.html('');

var $form = $('<form></form>');
$form.css("action", "/CreateRecordObject");
$form.css("method", "GET");
for (i in data.fields) 
    var $label = $('<strong/>').text(data.fields[i] + ": ");
    var $input = $('<input>');
    $input.css("name", data.fields[i]);
    $input.css("value", " ");
    $input.css("type", "text")
    $label.appendTo($form);
    $('<br>').appendTo($form);
    $input.appendTo($form);
    $('<br><br>').appendTo($form);


$('<input type="submit" value="submit">').appendTo($form);

$FormContainer.append($form);

此脚本在名为“/NewRecord.html”的 html 文件中创建表单

在后端，我有以下路线：

app.get('/CreateRecordObject', function(request, response)
  console.log("Inside the CreateRecordObject");
);

尽管如此，代码永远不会进入“/CreateRecordObject”。事实上，在按下提交按钮后，所发生的只是URL从http://436bb783.ngrok.io/NewRecord变为http://436bb783.ngrok.io/NewRecord？在末尾添加该问号并重新加载该站点。我究竟做错了什么？

【问题讨论】：

FormContainer 来自什么？我的意思是哪个脚本、库、框架等。

表单容器是

是的，我刚刚又添加了一次，谢谢！

【参考方案1】：

action 和 method 是属性而不是 CSS 样式。请将您的代码更改为以下内容：

// $form.css("action", "/CreateRecordObject");
// $form.css("method", "GET");

$form.attr("action", "/CreateRecordObject");
$form.attr("method", "GET");

$FormContainer = $('#container');
var data = fields: [1, 2, 3];
$FormContainer.empty();

var $form = $('<form/>', "action": "/CreateRecordObject", "method": "GET");
for (i in data.fields) 
    var $label = $('<strong/>').text(data.fields[i] + ": ");
    var $input = $('<input>', "name": data.fields[i], "value": "", "type": "text");
    $label.appendTo($form);
    $('<br>').appendTo($form);
    $input.appendTo($form);
    $('<br><br>').appendTo($form);


$('<input type="submit" value="submit">').appendTo($form);
$FormContainer.append($form);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="container"></div>

来源：http://api.jquery.com/attr/

【讨论】：

非常感谢！这就是问题所在，我太傻了！

也看看这个：$input.css("name", data.fields[i]); 等。也许你应该用同样的方法修复它。