Formular mit AJAX zu php api senden

Question

Ich habe ein Formular, das Daten in eine PHP-API-Datei schreibt. Ich habe die API funktioniert und es erstellt ein Konto, aber ich möchte AJAX verwenden, um die Daten zu senden, damit ich die UX besser machen kann. Hier ist, was das PHP-Skript sendet erwartet:

<form id="modal-signup" action="/crowdhub_api_v2/api_user_create.php" method="post"> 
       <div class="modal-half"> 
        <input type="text" placeholder="First Name" name="user_firstname"></input> 
       </div> 
       <div class="modal-half"> 
        <input type="text" placeholder="Last Name" name="user_lastname"></input> 
       </div> 

       <div class="modal-half"> 
        <input type="Radio" placeholder="Gender" value="male" name="user_gender">Male</input> 
       </div> 
       <div class="modal-half"> 
        <input type="Radio" placeholder="Gender" value="female" name="user_gender">Female</input> 
       </div> 
       <div class="modal-half"> 
        <input type="date" placeholder="DOB" name="user_dateofbirth"></input> 
       </div> 
       <div class="modal-half"> 
        <input type="text" placeholder="Zip Code" name="user_zip"></input> 
       </div> 

       <input class="end" type="email" placeholder="Email" name="user_email"></input> 
       <input type="password" placeholder="Password" name="user_password"></input> 
       <input type="submit"></input> 
      </form> 

PHP

$user_firstname = $_REQUEST['user_firstname']; 
    $user_lastname = $_REQUEST['user_lastname']; 
    $user_email = $_REQUEST['user_email']; 
    $user_password = $_REQUEST['user_password']; 
    $user_zip = $_REQUEST['user_zip']; 
    $user_dateofbirth = $_REQUEST['user_dateofbirth']; 
    $user_gender = $_REQUEST['user_gender']; 
    $user_phone = $_REQUEST['user_phone']; 
    $user_newsletter = $_REQUEST['user_newsletter']; 

Wie würde ich dies über Ajax senden? Ich habe dieses Skript gefunden, das besagt, dass es funktioniert hat, aber es hat keinen Benutzer erstellt. Ich kann mir vorstellen, dass das Senden der Daten nicht der richtige Weg ist.

Ajax

$(function() { 

$('#modal-signup').on('submit', function (e) { 

    e.preventDefault(); 

    $.ajax({ 
    type: 'post', 
    url: '/api_v2/api_user_create.php', 
    data: $('form').serialize(), 
    success: function() { 
     alert('form was submitted'); 
    } 
    }); 

}); 

}); 

Answer 1

Lassen Sie uns zuerst Ajax in Ordnung bringen:

$(function() { 

    $('#modal-signup').on('submit', function (e) { 

     e.preventDefault(); 

     $.ajax({ 
     type: 'post', 
     //same url as the form 
     url: '/crowdhub_api_v2/api_user_create.php', 
     data: $('form').serialize(), 
     //we need a variable here to see what happened with PHP 
     success: function (msg) { 
      //output to the page 
      $('#output').html(msg); 
      //or to the console 
      //console.log('return from ajax: ', msg); 
     } 
     }); 
    }); 
}); 

Irgendwo auf der Formularseite, fügen Sie ein div mit id Ausgabe:

<div id="output></div> 

schließlich in api_user_create.php gibt es einen Fehler:

$user_gender = $_REQUEST['user_gender']; 
//these last two do not exist on the form 
$user_phone = $_REQUEST['user_phone']; 
$user_newsletter = $_REQUEST['user_newsletter']; 

Ich würde einige Fehlerprüfung auf der PHP-Seite empfehlen, wie diese

if(!empty($_REQUEST)){ 
    //For developing, you may want to just print the incoming data to see what came through 
    //This data returns into the msg variable of the ajax function 
    print_r($_POST); 

    //once that's good, process data 
    if(isset($_REQUEST['user_gender'])){ 
     $user_gender = $_REQUEST['user_gender']; 
    } 
    //etc... as before 
} else { 
    echo 'no data received'; 
}