JQuery重定向浏览器而不是在后台执行任务答案

【问题标题】：JQuery redirecting browser instead of doing tasks in the backgroundJQuery重定向浏览器而不是在后台执行任务
【发布时间】：2019-05-19 11:42:21
【问题描述】：

我有一个名为 [Settings->Admins] 的页面，它将为该站点创建和管理管理员帐户。我的 html 表单设置如下：

<form id="createAdmin">
  <div class="form-group row text-center">
    <label for="username" class="offset-md-3 col-md-2">Username</label>
    <div class="col-md-3">
      <input type="text" id="username" name="username" class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <label for="password" class="offset-md-3 col-md-2">Password</label>
    <div class="col-md-3">
      <input type="password" id="password" name="password"
      class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <label for="password_confirmation" class="offset-md-3 col-md-2">Confirm Password</label>
    <div class="col-md-3">
      <input type="password" id="password_confirmation" name="password_confirmation"
      class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <label for="email" class="offset-md-3 col-md-2">Email</label>
    <div class="col-md-3">
      <input type="email" id="email" name="email" class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <label for="first_name" class="offset-md-3 col-md-2">First Name</label>
    <div class="col-md-3">
      <input type="text" id="first_name" name="first_name"
      class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <label for="last_name" class="offset-md-3 col-md-2">Last Name</label>
    <div class="col-md-3">
      <input type="text" id="last_name" name="last_name" class="form-control form-control-sm">
    </div>
  </div>
  <div class="form-group row text-center">
    <div class="offset-md-5 col-md-2">
      <button id="createAdminSubmit" class="btn btn-primary">Create</button>
    </div>
  </div>
</form>

而Javascript在表单代码下方如下：

<script>
  $(document).ready(function() {
    $('#createAdmin').on('submit', function(e) {
      e.preventDefault();
      var username = $('#username').val();
      var password = $('#password').val();
      var password_confirmation = $('#password_confirmation').val();
      var email = $('#email').val();
      var first_name = $('#first_name').val();
      var last_name = $('#last_name').val();
      $.ajax({
        type: "POST",
        url: host+'/login',
        data: {username:username, password:password, password_confirmation:password_confirmation, email:email, first_name:first_name, last_name:last_name}
        success: function(response) {
          if(response=="success") {
            // Would return a success message here when it works
          } else {
            // Would return a error message here when it works
          }
        }
      });
    });
  });
</script>

当我尝试提交表单时，它会使用 GET 请求（？username=&password=.... 等等）重定向到同一页面，即使我在 ajax 中明确表示 POST。

为什么不在后台做ajax？它执行 GET 请求，就好像 ajax 不存在一样。我正在使用 Metronic 最新的 5 Admin Template 和 Laravel 5.7（最新稳定版）。

F12 日志报告这个：

admins?username=&password=&password_confirmation=&email=&first_name=&last_name=:591 未捕获的 ReferenceError：$ 未定义在 admins?username=&password=&password_confirmation=&email=&first_name=&last_name=:591 （匿名的） @ admins?username=&password=&password_confirmation=&email=&first_name=&last_name=:591

第 591 行是：

$(document).ready(function() {

【问题讨论】：

标签： jquery html ajax

【解决方案1】：

你的数据和成功之间没有逗号。

data: {username:username, password:password, password_confirmation:password_confirmation, email:email, first_name:first_name, last_name:last_name}

在行尾需要一个逗号。

按 F12 打开调试窗口，此类错误将在控制台上报告，并带有描述和行号。

【讨论】：

好的，我会看看这是否有帮助！ :D 感谢您的回复。
我已将日志报告的内容添加到帖子中。
看起来可能是因为我在 jquery 文件之前包含了这个。将其添加到文件中。

【解决方案2】：

解决了！

必须包含在 jquery 之后。 Metronic 与大多数开发人员一样在页脚包含 JQuery 文件，因此请务必在 JQuery 文件下方包含脚本标记，以便在加载 css 文件时首先加载 JQuery。我这样做是因为我使用的是 Laravel 刀片模板引擎：

在添加所有 javascript 后，将 yield('customScripts') 添加到刀片布局文件页脚。然后，在适当的刀片文件中，添加一个名为 CustomScripts 的新部分（'content'），它应该可以工作！

【讨论】：