Php 如何使用AJAX更新表单？

我正在尝试通过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
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);
}
}

?>

$(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，所以任何帮助都将意味着很多！谢谢

将

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脚本中检查

$\u POST

，而不是

$\u GET

您正在使用ajax请求（正文中的数据）发送POST数据，但希望在php脚本中获取数据（url中的数据）。替换

$（'#消息'）。文本（“strMessage”）$（'#message'）.html（strMessage）的code>

尝试了这两种方法，但都没有修复。当控制台中的async为false时，我发现主线程上的[Deprection]Synchronous XMLHttpRequest已被弃用，因为它会对最终用户的体验产生有害影响。要获得更多帮助，请检查。我还将php文件中的所有GET替换为POST，但当我单击按钮时，仍然没有发生任何事情。您应该尝试从虚拟页面中添加$u POST以包括/profile/form/settings.php，然后查看发生了什么。您通常不会通过脚本中的AJAX调用返回错误消息，只是什么都没有发生。很明显，调用已经发送（因此您有正确的url），它也没有任何错误（因为错误函数没有响应），因此我认为您发布到的脚本中有问题。