jQuery ajax ne fonctionne pas

Question

J'ai fait un test jQuery Ajax script et je l'ai joint à un formulaire lors de la soumission, mais malgré le fait que j'ai return false à la fin de ma fonction la page garder rafraîchir à soumettre et je ne le fais pas obtenir une réponse.

La forme ressemble à ceci:

<form id="LogInForm" onsubmit="return LogIn();"> 
    <input type="text" placeholder="Username" name="Username"><br/> 
    <input type="password" placeholder="Password" name="Password"><br/> 
    <input id="LogIn" type="submit" value="Sign In"> 
</form> 

Le look de script comme ceci:

function LogIn() { 

    $.ajax({ 
      type:'POST', 
      url: 'login.php', 
      data:$('#LogInForm').serialize(), 
      success: function(response) { 
        alert(response); 
       }}); 
     return false; 
     } 

Le fichier login.php ne contient que echo "test";

Le index.php et login.php sont dans le même dossier.

Answer 1

Je viens de supprimer le sous-formulaire de votre formulaire et l'a implémenté dans le script.

<form id="LogInForm"> 
    <input type="text" placeholder="Username" name="Username"><br/> 
    <input type="password" placeholder="Password" name="Password"><br/> 
    <input id="LogIn" type="submit" value="Sign In"> 
</form> 

scénario

$(function() { 
    $("#LogInForm").submit(function() { 
     $.ajax({ 
      type:'POST', 
      url: 'login.php', 
      data:$('#LogInForm').serialize(), 
      success: function(response) { 
       alert(response); 
      }}); 
     return false; 
    }); 
}); 

Answer 2

$(function() { 
    $("#LogInForm").submit(function() { 
     $.post('login.php', $("#LogInForm").serialize()).done(function(data) { 
      alert(data); 
     }); 
    }); 
}); 

et le code html

<form id="LogInForm"> 
    <input type="text" placeholder="Username" name="Username"><br/> 
    <input type="password" placeholder="Password" name="Password"><br/> 
    <input id="LogIn" type="submit" value="Sign In"> 
</form>