PHP 和 AJAX 將數據更新到數據庫

Question

我正在嘗試使用PHP和AJAX將一個簡單的字符串更新到數據庫中。

這是代碼：

HTML

<form id="phoneNumberForm" class="form-inline" method="post" enctype="multipart/form-data">
    <div class="form-group mx-sm-3 mb-2 align-content-center">
          <label for="phoneNumber" class="sr-only">Phone</label>
          <input type="text" class="form-control" name="phoneNumber" id="phoneNumber" placeholder="Phone">
    </div>
    <button type="submit" name="phoneNumber_submit" id="phoneNumber_submit" class="btn btn-primary mb-2">Save</button>
    <div id="phoneSuccess"></div>
</form>

PHP

if (isset($_POST['phoneNumber_submit'])) {
    $phoneNumber = $_POST['phoneNumber'];
    $profileEditAdmin = $db->query('UPDATE users SET user_phone = ? WHERE user_name = ?', $phoneNumber, $_SESSION['user_name']);
}

AJAX

$('#phoneNumberForm').submit(function(e) {
    e.preventDefault();

    let phoneNumber = $('#phoneNumber').val();

    let $body = $("body");

    $(document).on({
         ajaxStart: function() { $body.addClass("loading"); },
         ajaxStop: function() { $body.removeClass("loading"); }
    });

    $.ajax({
        type: "POST",
        data: {
            phoneNumber:phoneNumber,
        },
        success: function() {
            $('#phoneSuccess').html('<p>Saved.</p>');
            setTimeout(function() {
                $('#phoneSuccess').fadeOut();
            }, 2000)
        }
    });
});

當我刪除preventDefault()時，我得到了數據庫中的條目，但頁面被重新加載。

我的目標是在數據庫中有一個條目並避免頁面刷新。

Answer 1

在這里，您的 PHP 查找名為phoneNumber_submit的變量：

if (isset($_POST['phoneNumber_submit'])) {

但是在這里，您的 AJAX 僅發送一個名為phoneNumber的變量：

data: {
  phoneNumber:phoneNumber,
}

顯然這兩個名稱不匹配，因此if語句永遠不會為真，查詢也永遠不會運行。 當您在沒有 AJAX 的情況下提交表單時，它可以工作，因為您的提交按鈕上有name="phoneNumber_submit" ，所以這個值被發送到服務器。

所以你可以：

1）將此值硬編碼到您的data參數中：

data: {
  "phoneNumber": phoneNumber,
  "phoneNumber_submit": true
}

或者

2) 只需讓 jQuery 為您完成工作，並使用序列化function 來獲取您已經在 HTML 中定義的所有值和名稱，然后再指定每個值和名稱，而無需您再次指定：

data: $(this).serialize() 

注意：上面代碼中的this將是您的<form>元素，因為您正在處理表單的“提交”事件。