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 为您完成工作并使用 serialize 函数获取您已经在 HTML 中定义的所有值和名称并发送它们直接到服务器，无需再次指定每一个：

data: $(this).serialize()

注意：上面代码中的 this 将是您的 <form> 元素，因为您正在处理表单的 "submit" 事件。

PHP 和 AJAX 更新数据到数据库

PHP and AJAX update data to database

php

mysql

ajax

mysqli