フォームを送信するときにAJAXを使用する

Question

私はAJAXを使って提出することが非常に新しく、多くのチュートリアルを続けてきましたが、現在のシナリオではうまくいかないようです。

私は、その内部にPHPスクリプトといくつかのJQuery AJAXにリンクされたフォームを持つモーダルを持っています。

フォームを送信すると、ページが白く表示されますが、これはPHPスクリプトの条件付きロジックが原因であると確信しています。

私は$stmt->rowCount()を持っていますが、条件付きロジックの場合、この時点でスクリプトは何もしませんので、何も返しません。

このロジックをAJAXの成功または失敗にリンクすることはできますか、スクリプトからブール値を返す必要がありますか？

私はこれがおそらく愚かな質問と考えられていることは知っていますが、いくらかの明確さは大いに役立つでしょう。 AJAX要求を送信する前に

if (empty($_POST["forename"]) || 
    empty($_POST["surname"]) || 
    empty($_POST["email"]) || 
    empty($_POST["company"])) 
    { 

    } 
    else{ 

     $forename = $_POST['forename']; 
     $surname = $_POST['surname']; 
     $email_address = $_POST['email']; 
     $company_name = $_POST['company']; 
     $id = rand(); 
     $date_time = date('Y-m-d'); 


     try 
      { 
       // Construct the SQL to add a book to the database 
       $sql = "INSERT INTO user_data (forename, surname, email_address, company_name, id, date_time) 
       VALUES (:forename, :surname, :email_address, :company_name, :id, :date_time)"; 
       // Prepare the SQL and bind parameters 
       $stmt = $conn->prepare($sql); 
       $stmt->bindParam(':forename', $forename); 
       $stmt->bindParam(':surname', $surname); 
       $stmt->bindParam(':email_address', $email_address); 
       $stmt->bindParam(':company_name', $company_name); 
       $stmt->bindParam(':id', $id); 
       $stmt->bindParam(':date_time', $date_time); 
       $stmt->execute(); 

       // If the statement affected the database 
       if ($stmt->rowCount() > 0) 
       { 

       } 
       else{ 

       } 

      } catch(PDOException $e){ 
       echo "Error: " . $e->getMessage(); 
      } 

    } 

Answer 1

フォームでserialize（）メソッドを使用して、ajax呼び出しでデータプロパティを定義します。エラー処理も追加されました。

$.ajax({ 
     url: "process_data.php", 
     type: "POST", 
     data: $("#userForm").serialize(), 
     success: function(data){ 
      //Successful 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) 
     { 
      if (!window.console) console = { log: function() { } }; 
      console.log(JSON.stringify(XMLHttpRequest), textStatus, errorThrown); 
     } 
    }); 

Answer 2

使用preventDefault();データを処理するため

フォーム

<form id="userForm" method="post" action="test/process_data.php"> 
    <div class="form-group"> 
     <label for="email">First name:</label> 
     <input type="text" class="form-control" name="forename" id="forename" placeholder="E.g John" required> 
    </div> 
     <div class="form-group"> 
     <label for="email">Surname:</label> 
     <input type="text" class="form-control" name="surname" id="surname" placeholder="E.g Smith" required> 
    </div> 
    <div class="form-group"> 
     <label for="email">Email:</label> 
     <input type="email" class="form-control" name="email" id="email" placeholder="someone@example.com"> 
    </div> 
    <div class="form-group"> 
     <label for="company">Company:</label> 
     <input type="text" class="form-control" name="company" id="company" placeholder="Company name"> 
    </div> 

    <button type="submit" class="btn btn-primary">Submit</button> 
    <a href="" class="btn btn-default">Just take me to the partner</a> 
    </form> 

AJAXスクリプト

<script> 

     $("#userForm").submit(function(e) { 
     var forename = $('#forename').val(); 
     var surname = $('#surname').val(); 
     var email = $('#email').val(); 
     var company = $('#company').val(); 

     $.ajax({ 
      url: "process_data.php", 
      type: "POST", 
      data: { 
       "forename" : forename, 
       "surname" : surname, 
       "email" : email, 
       "company" : company 
      }, 
      success: function(data){ 
      $("#forename").val(''); 
      $("#surname").val(''); 
      $("#email").val(''); 
      $("#company").val(''); 

      } 
     }); 

     e.preventDefault(); // avoid to execute the actual submit of the form. 

     } 


</script> 

PHPスクリプト。フォームが完成したら、あなたはこれを行うことができます。

<script> 

     $("#userForm").submit(function(e) { 
     var forename = $('#forename').val(); 
     var surname = $('#surname').val(); 
     var email = $('#email').val(); 
     var company = $('#company').val(); 

e.preventDefault(); // avoid to execute the actual submit of the form. 

     $.ajax({ 
      url: "process_data.php", 
      type: "POST", 
      data: { 
       "forename" : forename, 
       "surname" : surname, 
       "email" : email, 
       "company" : company 
      }, 
      success: function(data){ 


      } 
     }); 
$("#userForm").fadeOut(800, function() 
{ 
    $(this)[0].reset(); 
}).fadeIn(800); 


     } 


</script>