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

Question

我有一个名为[设置]的页面-

<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请求（？用户名）的同一页面=

为什么它不在后台运行ajax？它执行GET请求，就好像ajax不存在一样。我正在使用Metronic最新的5管理模板和Laravel 5.7（最新版本）。

F12日志正在报告以下情况：

管理员？用户名=

第591行是：

$(document).ready(function() {

Answer 1

已解决！

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

添加所有javascript后，将yield（'customScripts'）添加到刀片布局文件页脚。然后，在相应的刀片文件中，添加一个名为CustomScripts的新部分，就像您所做的那样（“内容”），它应该可以工作！

Answer 2

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

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

行尾需要一个逗号。

点击F12打开调试窗口，控制台上会报告此类错误，并给出描述和行号。