【问题标题】：Cannot send a POST request in HTML Form无法在 HTML 表单中发送 POST 请求
【发布时间】：2021-06-28 16:27:31
【问题描述】：

所以我正在从我的 NodeJS 服务器提供这个特定的 HTML 文件，该文件正在正确呈现。但问题是当我点击 CREATE 按钮时，我无法向我的服务器发送 POST 请求。我正在获取根据 GET 请求呈现的页面。但是当我点击 POST 时。我想将 POST 请求发送回我的服务器。请帮我整理一下。

    <section>
        <form action="/login" method="POST"></form>
        <div class="container-fluid ">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6 bg-light p-5">
                    <div class="row">
                        <div class="col-md-3"></div>
                        <div class="form-group col-md-6">
                            <label class="form-label col-label" for="old_pass">First Name</label>
                            <input class="field__input" type="text" name="old_pass" placeholder="" id="old_pass">
                        </div>
                        <div class="col-md-3"></div>
                        <div class="col-md-3"></div>
                        <div class="form-group col-md-6">
                            <label class="form-label col-label" for="new_pass">Last Name</label>
                            <input class="field__input" type="text" name="new_pass" placeholder="" id="new_pass">
                        </div>
                        <div class="col-md-3"></div>
                        <div class="col-md-3"></div>
                        <div class="form-group col-md-6">
                            <label class="form-label col-label my-3" for="emailaddress_personal;">Email Address</label>
                            <input class="field__input" type="text" name="emailaddress_personal;" placeholder="joe.black@gmail.com" id="emailaddress_personal;">
                        </div>
                        <div class="col-md-3"></div>
                        <div class="col-md-3"></div>
                        <div class="form-group col-md-6">
                            <label class="form-label col-label" for="chk_new_pass">Password </label>
                            <input class="field__input" type="password" name="chk_new_pass" placeholder="" id="chk_new_pass">
                        </div>
                        <div class="col-md-3"></div>

                    </div>
                    <div class="form-group text-center">
                        <a class="btn btn-outline-dark" type="submit">Create</a>
                    </div>
                </div>
                <div class="col-md-3"></div>
            </div>
        </div>
        </form>
    </section>

【问题讨论】：

服务器是否配置了 POST 路由？如果是，您是否看到任何错误？
它确实注册了 POST 路由。
点击按钮时什么都没有发生。

标签： html node.js web request

【解决方案1】：

我认为一个标签不支持提交。可以试试输入类型提交吗

【讨论】：

我将 a 标签更改为 <input type="submit" value="Create" class="btn btn-outline-dark" > 仍然没有运气。虽然我得到了相同的 UI，但提交时没有任何反应。
因为提交按钮不在表单内。表单标签打开和关闭及其为空。

【解决方案2】：

点击按钮时什么都没有发生。

你有两个问题。

你没有按钮。

<a class="btn btn-outline-dark" type="submit">Create</a>

您有一个锚点（缺少href 和name 属性），其样式看起来像一个按钮。

CSS 不会取代语义 HTML，尤其是当 HTML 的语义具有您需要的特定功能时。

提交按钮使用button 或input 元素。

<button>Label</button>

<input type="submit" value="Label and value">

您的表单中没有任何内容

<form action="/login" method="POST"></form>

表单的结束标记紧跟在开始标记之后，因此没有任何表单控件在其中。

稍后您有第二个结束标记被忽略（因为表单已经关闭）。

删除第一个结束标记。

【讨论】：

是的。谢谢。我真是太愚蠢了。一个自动完成标签的东西。非常感谢！无法相信经过数小时的努力，这一切都归结为这一点。
对不起这里的菜鸟。即使现在请求正在被解析。我无法在请求中获取表单值。有什么办法可以在请求中获取它们？？
如果你按照我说的做，他们应该在请求中。如果您无法阅读它们，则可能是您的服务器端代码有问题。

【解决方案3】：

您说您正在通过 GET 请求呈现页面，您可能希望通过在 <form> 标记的 onsubmit 属性内创建函数来阻止呈现页面，并将其添加如下：

function onSubmit(event) {
  event.preventDefault();

  // Make your post request here using axios / AJAX or etc..
}

如果错误仍然存在，请尝试在您的 nodejs 服务器上调试您的发布路由。

【讨论】：