无法在 HTML 表单中发送 POST 请求

Question

所以我从我的 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>

Answer 1

我认为标签不支持提交。您可以尝试输入类型 submit

Answer 2

Nothing is happening whenever I am clicking the button.

你有两个问题。

您没有按钮。

<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>

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

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

删除第一个结束标记。

Answer 3

你说你在 GET 请求上得到一个页面呈现，你可能想通过在 <form> 标签的 onsubmit 属性中创建一个函数来阻止呈现页面，并添加喜欢：

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

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

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

无法在 HTML 表单中发送 POST 请求

Cannot send a POST request in HTML Form

html

request

node.js

web

您没有按钮。

您的表单中没有任何内容