Question

我有一个名为[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>

当我尝试提交表单时，即使我清楚地在ajax中说了POST，它也会通过GET请求（？username =＆password = ....等）重定向到同一页面。

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

F12日志报告此：

admins？username =＆password =＆password_confirmation =＆email =＆first_name =＆last_name =：591 未捕获的ReferenceError：未定义$ 在管理员位置？用户名=＆密码=＆密码确认=＆email =＆first_name =＆last_name =：591 （匿名）@ admins？username =＆password =＆password_confirmation =＆email =＆first_name =＆last_name =：591

第591行是：

$(document).ready(function() {

Answer 1

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

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

在行尾需要逗号。

按F12键打开调试窗口，这些错误将在控制台上报告，并附有描述和行号。

Answer 2

已解决！

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

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

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

2 个答案: