JQuery перенаправляет браузер вместо выполнения задач в фоновом режиме

Question

У меня есть страница под названием [Настройки-> Администраторы], которая будет создавать и управлять учетными записями администратора для сайта.У меня есть настройка 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 = .... и т. д.), даже если я четко сказал POST в ajax.

Почему он не выполняет ajax в фоновом режиме?Это делает запрос GET, как будто ajax не существует.Я использую последний административный шаблон Metronic 5 и Laravel 5.7 (последняя стабильная версия).

Журнал F12 сообщает об этом:

admins? Username = & password = & password_confirmation = & email = & first_name = & last_name=: 591 Uncaught ReferenceError: $ не определено у администраторов? Username = & password = & password_confirmation = & email = & first_name = & last_name =: 591 (anonymous) @ admins? Username = & password = & password_confirmation = & email = & first_name = & last_name =: 591

Строка 591:

$(document).ready(function() {

Answer 1

решено!

Должно быть включено после jquery.Metronic включает файл JQuery в нижний колонтитул, как и большинство разработчиков, поэтому обязательно добавьте тег script ниже файла JQuery, чтобы сначала загрузить JQuery, как вы делаете файлы css.Я сделал это, так как использую шаблонный движок Laravel:

Добавьте yield ('customScripts') в нижний колонтитул файла макета лезвия после добавления всего javascript.Затем в соответствующем блейд-файле добавьте новый раздел с именем CustomScripts, как вы это делаете («контент»), и он должен работать!

Answer 2

Между вашими данными и успехом нет запятой.

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

нужна запятая в конце строки.

Нажмите F12, чтобы открыть окно отладки, и такиеошибки будут сообщаться на консоли с описанием и номером строки.