为什么这个javascript/jQuery不提交html表单？

我正在尝试使用Javascript/jQuery提交一个基于HTML的表单，但它似乎什么都没有提交

我的HTML表单现在是

<form class="navbar-form navbar-right" role="form" id="loginForm" action="login.php">
    <div class="form-group">
       <input type="text" class="form-control" name="username" placeholder="Username">
    </div>

    <div class="form-group">
       <input type="text" class="form-control" name="password" placeholder="Password">
    </div>

    <button type="submit" class="btn btn-primary">Sign In</button>
</form>

---

您有以下选择器：

var $username = $("#username");
var $password = $("#password");

但是标记中没有这样的匹配元素。因此，此条件将始终为

false

：

if ($username.val().length > 0 && $password.val().length > 0) {

更改标记以匹配选择器（通过将

id=“username”

和

id=“password”

添加到相关HTML元素），或更改选择器以匹配标记：

var $username = $("input[name=username]");
var $password = $("input[name=password]");

或者，更好的是，由于

submit

处理程序已经通过

$（this）

对表单进行了引用，因此您可以搜索该表单：

var $username = $form.find("input[name=username]");
var $password = $form.find("input[name=password]");

---

考虑到

名称

在DOM中不必是唯一的（尽管在

表单

中通常是唯一的），这一点尤其有用。

代码的问题在于您没有引用目标输入：

<input type="text" class="form-control" name="username" placeholder="Username">
<input type="text" class="form-control" name="password" placeholder="Password">

但为了简化工作，只需在元素上添加id属性：）

编辑得好！最好是使用一致的、可读的缩进和更全面的描述您迄今为止的诊断结果。它失败的具体位置/具体程度如何？JavaScript控制台上是否有错误？在调试器中单步执行时，代码是否按预期执行？是否发出了AJAX请求？它有你期望的数据吗？服务器的响应是什么？从文档：我们可以通过调用事件对象上的.preventDefault（）或从处理程序返回false来取消提交操作。@johnnymop：查看代码。OP用调用

$.post

来代替真正的提交。那么控制台说有没有post请求呢？或者甚至是

$form.find（“input[name=username]”）

来很好地控制它。@T.J.Crowder：好的观点，我会把它添加到答案中。谢谢@Experminator:“冻结”在哪里/如何？@Experminator:当您在调试器中单步执行代码时，是否有一个特定的操作是“冻结”的？浏览器是否完全没有响应？这只是按钮的造型问题吗？请具体说明。@Experminator:再说一遍：您的问题不能依赖于非现场内容。

<input type="text" class="form-control" name="username" placeholder="Username">
<input type="text" class="form-control" name="password" placeholder="Password">

    var $username = $('[name="username"]');
    var $password = $('[name="password"]'");

<input type="text" class="form-control" name="username" id="username" placeholder="Username">
<input type="text" class="form-control" name="password" id="password" placeholder="Password">