如何使用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:

<?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,所以任何帮助都将非常重要!谢谢!

huomiao1122 回答:如何使用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脚本中检查$_POST,而不是$_GET

本文链接:https://www.f2er.com/3142771.html

大家都在问