提交表格時使用AJAX

Question

我是剛開始使用AJAX提交表單的新手，並且已經關注了許多有關如何使用AJAX的教程，但是在目前的情況下，我似乎無法使其正常工作。

我有一個模態，其中的一個表單鏈接到PHP腳本和一些JQuery AJAX。

當我提交表單時，頁面顯示為白色，我可以肯定這是由於PHP腳本中的條件邏輯。

因此，在我有$stmt->rowCount()和條件邏輯的地方，它什么也不返回，因為腳本此時不執行任何操作。

我可以將此邏輯鏈接到AJAX成功或失敗，還是必須從腳本中返回布爾值？

我知道這可能被認為是一個愚蠢的問題，但一定要弄清楚是很有用的。

形成

<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腳本處理數據

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調用中的data屬性。 還增加了錯誤處理。

  $.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(); 在發送ajax請求之前。 現在，完成表單提交后，您可以這樣做。

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