如何向 SQL 发出 AJAX 请求，并更改 DOM 上显示的内容？答案

【问题标题】：How to make AJAX request to SQL, and change what's displayed on the DOM?如何向 SQL 发出 AJAX 请求，并更改 DOM 上显示的内容？
【发布时间】：2017-11-07 01:30:01
【问题描述】：

我有这个代码来显示用户名：

<div><?php echo 'My name is ' . '<span id="output">' . $_SESSION['firstname'] . '</span>' ?></div>

当用户更改个人资料时，我想更改 <span id="output"></span> 中显示的内容。

这是我用来更改他们在数据库中的个人资料数据（缩短为仅包含需要的内容）：

<form action="" method="POST">
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname">
    <button type="submit" name="submit">Submit</button>
</form>


if (isset($_POST['submit'])) {
        $username = $_SESSION['username'];

        $query = "SELECT * FROM `users` WHERE username='$username'";
        $result = mysqli_query($connect, $query) or die(mysqli_error());
        $profile = mysqli_fetch_assoc($result);

        $update = "UPDATE users SET firstname = '$firstname' WHERE username = '$username'";

        $result2 = mysqli_query($connect, $update);
            if (mysqli_query($connect, $update)) {
                $_SESSION['firstname'] = $firstname;
                echo 'Profile updated successfully';
            }
}

问题是，我不知道如何在不刷新页面的情况下将“输出”更改为新的 $_SESSION['firstname']。

我假设我需要使用 JQuery 的 ajax 函数，但我不确定如何专门使用这个函数来完成它。

【问题讨论】：

如果您将 PHP 代码移到 HTML 之上，那就没问题了。在打开标记之前，您应该尝试移动任何 php 逻辑，尤其是表单提交。这将使它在你显示之前更新会话值，你会没事的。
@Brett 哇哦，我想我只是没有以那种方式看待这个问题。谢谢！
以这种方式搜索名称是一个very very ..... very very very ..... .... very very 糟糕的想法。 更改您的数据库结构。每个用户都应该有自己的AUTO INCREMENT。将其存储在会话变量中，并更改该 ID 上的用户数据。如果两个人同名怎么办？
@Xorifelse 是的，我的数据库不同。每个用户都有一个唯一的用户名和一个唯一的自动递增 ID。我只是排除了这里的所有内容，以消除我的问题中的所有混乱情况。

标签： javascript php jquery ajax mysqli

【解决方案1】：

代码有很多问题。除此之外，这里还有一个简单的 ajax 请求。

$('.submit').click(function(e){
  e.preventDefault();
  $.ajax({
    type: "POST",
    url: 'yourscript.php',
    data: {firstname: $('#firstname').val()},
    success: function(data){
      $('#firstname').html(data);
    }
  });
})

对于 PHP：

# 'yourscript.php',

if(isset($firstname = $_POST['firstname'])){
  // do your stuff.

  echo 'your new data you want to display';
} else {
  echo 'something went wrong';
}

【讨论】：