Блог

Главная - Вопросы по программированию - Форма отправки AJAX без обновления, не работает должным образом

Форма отправки AJAX без обновления, не работает должным образом

#php #html #ajax

#php #HTML #ajax

Вопрос:

Когда я нажимаю «войти», скрипт запускается и распечатывает «заполнить все поля» (что здорово), но, похоже, он отображает его на экране, а затем обновляет страницу.

AJAX:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("form").submit(function(event){
      var username = $("#username").val();
      var password = $("#password").val();
      var login = $("#login").val();
      $(".formMessage").load("inc/accounts.php",{
        username: username,
        password: password,
        login: login
      });
    });
  });
</script>

Форма (только форма на странице)

 <form method="post" autocomplete="off">
        <div class="form-group"><input class="form-control" type="text" id="username" placeholder="Username" autofocus></div>
        <div class="form-group"><input class="form-control" type="password" id="password" placeholder="Password"></div>
        <div class="form-group"><button class="btn btn-outline-primary btn-block" type="submit" id="login">Login</button></div>
        <p class='formMessage'></p>
        <a href="#" class="forgot">Forgot your password?</a>
        <a href="register" class="forgot">Don't have an account?</a>
    </form>

PHP-код (accounts.php )

 if(isset($_POST['login'])){
    $username = $_POST['username'];
    $password = $_POST['password'];

    $date = date("d/m/Y");
    $time = date("h:i a");

    if(empty($username) || empty($password)){
      echo "<span style='color: red;'>Fill in all fields!</span>";
    }elseif(!DB::query('SELECT username FROM users WHERE username=:username', array(':username'=>$username))){
      echo "<span style='color: red;'>Incorrect password/username!</span>";
    }elseif(!password_verify($password, DB::query('SELECT password FROM users WHERE username=:username', array(':username'=>$username))[0]['password'])){
      echo "<span style='color: red;'>Incorrect password/username!</span>";
    }else{
      $uid = DB::query('SELECT id FROM users WHERE username=:username', array(':username'=>$username))[0]['id'];

      $cstrong = True;
      $token = bin2hex(openssl_random_pseudo_bytes(64, $cstrong));
      DB::query('INSERT INTO logintokens VALUES('', :token, :uid)', array(':token'=>sha1($token), ':uid'=>$uid));
      setcookie("uid", $token, time()   60 * 60 * 24 * 5, '/', '.link.com');
      setcookie("uid_", '1', time()   60 * 60 * 24 * 3, '/', '.link.com');

      echo "<span style='color: green;'>Successfully logged in!</span>";
      echo '<script>window.location.href = "home";</script>';
    }
  }

Видео, чтобы показать, что происходит:https://gyazo.com/8233450b6493bfe415105ea5dbb61b28

Комментарии:

1. поставить event.preventDefault() перед $("form").submit(function(event){ концами

2. Или return false; в конце.

3. @ZainFarooq как я это пропустил?? Спасибо!

4. @Barmar Нет. Вы также можете поместить ее в начало

5. @ZainFarooq Я пропустил последнее слово вашего предложения, я думал, вы предлагали поместить его в строку перед функцией.

Ответ №1:

Вы пропустили, event.preventDefault() что останавливает действие элемента по умолчанию. Ваш окончательный код должен выглядеть следующим образом

  $(document).ready(function(){
$("form").submit(function(event){
  var username = $("#username").val();
  var password = $("#password").val();
  var login = $("#login").val();
  $(".formMessage").load("inc/accounts.php",{
    username: username,
    password: password,
    login: login
  });
  event.preventDefault();
 });
});

Для получения дополнительной информации вы можете посетить здесь

Ответ №2:

Пара предложений для этого

  • Дайте вашей форме идентификатор, чтобы вы могли ссылаться на нее с помощью $('#formid') , просто для удобства чтения.
  • В вашем прослушивателе для отправки формы выполните действие по умолчанию «Запретить».

Вот пример того, как это сделать, вы уже передаете событие в свой код, поэтому нам просто нужно предотвратить его действие по умолчанию (отправка обновление).

 ...
$(document).ready(function(){
  $("form").submit(function(event){
    event.preventDefault();
...