AJAXでフォームをphp apiに送信

Question

私はphp apiファイルにデータをポストするフォームを持っています。私はAPIを稼働させてアカウントを作成しますが、AJAXを使用してデータを送信してUXをより良くすることができます。

<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

私はAJAXを経由して、これを送るだろうか

$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']; 

：ここでは期待しているものをPHPスクリプトを送信しているのですか？私はそれが働いたと言うこのスクリプトを見つけましたが、それはユーザーを作成しませんでした。私はデータが正しい方法ではないと思っています。

アヤックス

$(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

まずは、順番にAJAXを取得してみましょう：フォームページ上のどこか

$(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); 
     } 
     }); 
    }); 
}); 

、ID出力でのdivを追加します。

最後に

<div id="output></div> 

、中api_user_create.php、エラーがあります：

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

この

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'; 
}