如何使用 AJAX 更新表單？

Question

我正在嘗試通過 AJAX 更新表單，以便在提交表單時沒有重定向。 現在我遵循了一個教程，但似乎無法完成這項工作。 當我單擊提交按鈕時，沒有任何反應。

HTML：

<form class="profile_form" id="form" method="GET" action="include/profile/form/settings.php">
    <div class="profileFlex">
      <div class="settings-grid">
        <div class="profile-table">
          <div class="input-holder">
            <label for="first_name">First name</label>
          </div>
          <div class="input-holder">
            <input type="text" name="first_name" value="<?php echo $firstname[0]; ?>"> 
          </div>
        </div>
        <div class="profile-table">
          <div class="input-holder">
            <label>Last name</label>
          </div>
          <div class="input-holder">
            <input type="text" name="last_name" id="last_name" value="<?php echo $lastname[0]; ?>">
          </div>
        </div>
        <div class="profile-table">
          <div class="input-holder">
            <label>Address</label>
          </div>
          <div class="input-holder">
            <input type="text" name="address" value="<?php echo $address[0]; ?>">
          </div>
        </div>
        <div class="profile-table">
          <div class="input-holder">
            <label>City</label>
          </div>
          <div class="input-holder">
            <input type="text" name="city" id="city" value="<?php echo $city[0]; ?>">
          </div>
        </div>
        <div class="profile-table">
          <div class="input-holder">
            <label>ZIP code</label>
          </div>
          <div class="input-holder">
            <input type="text" name="zip" value="<?php echo $zip[0]; ?>">
          </div>
        </div>
        <div class="profile-table">
          <div class="input-holder">
            <label>Country</label>
          </div>
          <div class="input-holder">
            <input type="text" name="country" value="<?php echo $country[0]; ?>">
          </div>
        </div>
      </div>
      <div class="settings-grid">
        <div class="profile-table">
          <div class="input-holder">
            <label>Telephone</label>
          </div>
          <div class="input-holder">
            <input type="text" name="phone" value="<?php echo $phone[0]; ?>">
          </div>
        </div>
        <div class="profile-table">
          <div class="input-holder">
            <label>Telephone 2</label>
          </div>
          <div class="input-holder">
            <input type="text" name="phone2" value="<?php echo $phone2[0]; ?>">
          </div>
        </div>
        <div class="profile-table">
          <div class="input-holder">
            <label>Mobile phone</label>
          </div>
          <div class="input-holder">
            <input type="text" name="mobile" value="<?php echo $mobile[0]; ?>">
          </div>
        </div>
        <div class="profile-table">
          <div class="input-holder">
            <label>Mobile phone 2</label>
          </div>
          <div class="input-holder">
            <input type="text" name="mobile2" value="<?php echo $mobile2[0]; ?>">
          </div>
        </div>
        <div class="profile-table">
          <div class="input-holder checkbox-holder">
            <input type="checkbox" id="sendmails" class="profilebox" name="checkbox" <?php if ($checkbox[0] == 'on') { print 'checked="checked" '; } ?>>
            <label for="sendmails">Allow website to send promotional emails</label>
          </div>
        </div>
        <div class="profile-table">
          <div class="input-holder checkbox-holder">
            <input type="checkbox" class="profilebox" name="checkbox2" id="hide_mail" <?php if ($checkbox2[0] == 'on') { print 'checked="checked" '; } ?>>
            <label for="hide_mail">Hide email from listings</label>
          </div>
        </div>
      </div>
    </div>
    <input type="submit" name="update" id="update" value="Update" />
  </form>

PHP：

<?php
session_start();
$detectUser = $_SESSION['token'];

include "../../../layout/config.php";

if (isset($_GET['update'])) {
    $first_name = mysqli_real_escape_string($conn, $_GET['first_name']);
    $last_name = mysqli_real_escape_string($conn, $_GET['last_name']);
    $address= mysqli_real_escape_string($conn, $_GET['address']);
    $city = mysqli_real_escape_string($conn, $_GET['city']);
    $zip = mysqli_real_escape_string($conn, $_GET['zip']);
    $country = mysqli_real_escape_string($conn, $_GET['country']);
    $phone = mysqli_real_escape_string($conn, $_GET['phone']);
    $phone2 = mysqli_real_escape_string($conn, $_GET['phone2']);
    $mobile = mysqli_real_escape_string($conn, $_GET['mobile']);
    $mobile2 = mysqli_real_escape_string($conn, $_GET['mobile2']);

if(isset($_GET['checkbox'])){
    $checkbox = $_GET['checkbox'];
}else{
    $checkbox = "";
}

if(isset($_GET['checkbox2'])){
    $checkbox2 = $_GET['checkbox2'];
}else{
    $checkbox2 = "";
}

$sql = "UPDATE users SET user='$first_name', last_name='$last_name', address='$address', city='$city', zip='$zip', country='$country', phone='$phone', phone2='$phone2', mobile='$mobile', mobile2='$mobile2', checkbox='$checkbox', checkbox2='$checkbox2' WHERE `token` = '$detectUser'"; 

if(mysqli_query($conn, $sql)){
    echo "Records inserted successfully.";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($conn);
}
}

?>

jQuery AJAX：

$(document).ready(function (e) {
    $('#update').click(function (event)
    {
        event.preventDefault();

        $.ajax({
            data: $('form').serialize(),
            url: "include/profile/form/settings.php", //php page URL where we post this data to save in database
            type: 'GET',
            success: function (strMessage) {
                $('#message').text("strMessage");
            }
        })
    });
});

我知道這個問題已經被問過很多次了，但我現在才第一次面對 AJAX，所以任何幫助都意義重大！ 謝謝！

Answer 1

將async設置為false 。 我還建議添加一個error()回調

$(document).ready(function (e) {
    $('#update').click(function (event) {
        event.preventDefault();

        $.ajax({
            data: $('form').serialize(),
            url: "include/profile/form/settings.php", //php page URL where we post this data to save in database
            type: 'GET',
            success: function (strMessage) {
                $('#message').text(strMessage);
            },
            error: function(ts) {
                console.log(ts)
            },
            async: false
        });
    });
});

您還應該確保在 php 腳本中檢查$_POST而不是$_GET 。