jQuery AJAX PHP форма входа в систему

Question

Я пытаюсь создать форму для входа в webapp.

Моя Войти Форма

<form class="col s12" method="post" action="#"> 
    <div class="row"> 
     <div class="input-field col s12"> 
      <input id="username" type="text" name="name" required> 
      <label for="username">Username</label> 
     </div> 
    </div> 
     <div class="row"> 
      <div class="input-field col s12"> 
       <input id="password" type="password" name="pas" required> 
       <label for="password">Password</label> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div id="error"></div> 
     <div class="card-action"> 
      <button class="btn waves-effect waves-light" id="loginBtn" type="submit" value="Log In">Submit 
       <i class="mdi-content-send right"></i> 
      </button> 
     </div> 
    </div> 
</form> 

Кнопка нажмите скрипт

<script> 
    $(document).ready(function() { 

     $('#loginBtn').click(function() { 

      var username=$("#username").val(); 
      var password=$("#password").val(); 
      var dataString = 'username='+username+'&password='+password; 
      if($.trim(username).length>0 && $.trim(password).length>0) { 

       $.ajax({ 
        type: "POST", 
        url: "login.php", 
        data: dataString, 
        cache: false, 
        beforeSend: function(){ $("#loginBtn").val('Connecting...');}, 
        success: function(data){ 
         if(data) { 
          window.location.href = "application.php"; 
         } else { 
          $('#loginCard').shake(); //Shake animation effect. 
          $("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and password. "); 
         } 
        } 

       }); 
      } 
      return false; 

     }); 

    }); 
</script> 

login.php

<?php 
    include("db.php"); 
    session_start(); 
    if(isset($_POST['username']) && isset($_POST['password'])) { 

     $username=mysqli_real_escape_string($db,$_POST['username']); 
     $password=msqli_real_escape_string($db,$_POST['password']); 
     $result=mysqli_query($db,"SELECT uname FROM users WHERE uname='$username' and pass='$password'"); 
     $count=msqli_num_rows($result); 
     $row=mysqli_fetch_array($result,MYSQLI_ASSOC); 

     if($count==1) { 

      $_SESSION['login_user']=$row['uname']; 
      echo $row['uname'] 

     } 

    } 
?> 

Всякий раз, когда я нажимаю-й e submit, он перенаправляет на ту же страницу (index.php) методом POST. В инструментах разработчика chrome данные отправки никогда не отправляются в login.php, и я не могу понять, что вызывает эту проблему. Любая помощь будет оценена по достоинству.

Answer 1

Вы должны изменить

<form class="col s12" method="post" action="#"> 

в

<form id="loginForm" class="col s12" method="post" action="#"> 

и вместо:

$('#loginBtn').click(function() { 

вы должны иметь:

$('#loginForm').submit(function(e){ 
    e.preventDefault(); 
    // Rest of the code here 
}); 

или если выше не работает, вы можете попробовать это:

$('#loginForm').submit(function(e){ 
    // call a function for the ajax job 
    return false; 
}); 

Answer 2

<script> 
    $(document).ready(function() { 
     $("#login").submit(function (e) 
     { 

      var firstForm = $("#login").serialize(); 

      $.ajax({ 
       url: "login.php", 
       type: 'POST', 
       data: firstForm, 
       mimeType: "multipart/form-data", 
       //contentType: false, 
       cache: false, 
       processData: false, 
       success: function (data) 
       {      
        if ($.trim(data) === '1') { 
         window.location.href = 'display.php';         
        } 
        else { 
         $('#msgbox').html('Invalid Email id or password.'); 
         $('#msgbox').addClass("success").css("color", "red").fadeIn(); 
         $('#msgbox').addClass("success").css("font-size", "15px"); 
        } 
       } 
      }); 
      e.preventDefault(); 
     }); 

    }); 
</script>