Einfache .ajax scheitern

Question

Eine einfache Geige wo .ajax versagt:

<form action="welcome_post.php" method="post" id="f"> 
Name: <input type="text" name="name"><br> 
<input type="submit"> 
</form> 
<script> 
    $(document).ready(function(){ 
     $("#f").submit(function(event) { 
      event.preventDefault(); 
      $.post("/tests/welcome_post.php",function(data){ 
       alert(data) 
      }); 
     }); 
    }); 
</script> 

und welcome_post.php Antwort

<?php echo $_POST["name"]; ?> 

Wenn ich Event.preventDefault entfernen() den Code lädt eine neue PHP-Seite und funktioniert, sonst wird die $ _POST-Variable nicht gesetzt und alarmiert mit undefiniertem Indexfehler. Wie kann ich festlegen, dass .post zur Arbeit geht?

Answer 1

Es funktioniert nicht, weil Sie POST-Daten nicht tatsächlich senden.

sollte diese Arbeit:

jQuery('#f').submit(function(evt) { 
    evt.preventDefault(); 
    var data = jQuery(this).serialize(); 
    jQuery.post('your/url.php', data, function(result) { 
     console.log(result); 
    }); 
}); 

Answer 2

Sie keine Daten in Ihre Anfrage senden. Weil es Ajax ist, müssen Sie ihm sagen, welche Daten zu verwenden sind. Es wird nicht automatisch die Formulardaten verwenden, müssen Sie es an:

$(document).ready(function(){ 
    $("#f").submit(function(event) {   
    event.preventDefault(); 
    $.post(
    "/tests/welcome_post.php", 
    $(this).serialize(), //this will serialise the form data into the request 
    function(data){ 
     alert(data); 
    } 
    ); 
    }); 
}); 

Siehe https://api.jquery.com/jquery.post/ für die vollständige Liste der Parameter, die Sie diese Methode einreichen verwenden.

Sie sollten auch die Registerkarte "Netzwerk" der Developer Tools Ihres Browsers verwenden, um den Inhalt Ihrer Anfragen und Antworten zu überwachen - dies wird Ihnen helfen, die Ursachen solcher Probleme zu verstehen.