PHP 和 AJAX 将数据更新到数据库答案

【问题标题】：PHP and AJAX update data to databasePHP 和 AJAX 将数据更新到数据库
【发布时间】：2020-09-22 15:15:22
【问题描述】：

我正在尝试使用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() 时，我在数据库中获得了条目，但页面被重新加载。

我的目标是在数据库中有一个条目并避免页面刷新。

【问题讨论】：

您的 ajax 代码中没有 url 参数。
你需要它来请求php页面。
@Marko 在提交事件函数末尾添加return false，它将阻止刷新您的页面。
@turivishal 这已经由e.preventDefault() 实现 - 请参阅api.jquery.com/event.preventDefault
@ADyson 感谢感谢

标签： php mysql ajax mysqli

【解决方案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> 元素，因为您正在处理表单的“提交”事件。

【讨论】：