javascript - 在javascript DOM元素更改后将php变量插入数据库

Question

我有一个长期测试的数据库字段，它是整个用户页面。我想让用户编辑他们页面的一部分。不可能搜索长文本字符串并只更新某些部分，所以我想在代码中包含 ID 并执行 dom getElementbyId 并在正确的位置更改内部 html，然后将新代码插入 db。但是，当我回显页面但不插入回数据库时，这会起作用。如果这令人困惑，请看下面我的意思

这有效，当我回显 $var 它说你好:

<?php 

$newVar = "hello guy";
$var = "<p id='hello world'></p>";

echo $var;
?>
<script>
document.getElementById("demo").innerHTML = "<?php echo $newVar; ?>";
</script>

但是当插入到数据库中时，它是 hello world，而不是 hello guy:

<?php 

$newVar = "hello guy";
$var = "<p id='hello world'></p>";

$stmt = $conn->prepare("INSERT INTO temp429 (post_content) VALUES (?)");
$stmt->bind_param("s", $var);


$stmt->execute();
?>
<script>
document.getElementById("demo").innerHTML = "<?php echo $newVar; ?>";
</script>

我期待 hello guy 被插入到数据库中，就像它在回显时显示的那样，但没有这样做。有解决办法吗？

Answer 1

从您的评论来看，您似乎理解为什么您的代码不起作用，但我还是要解决这个问题。 PHP 不知道将其输出发送到客户端后会发生什么。它看不到 DOM 发生的任何事情。将 innerHTML 更改为“hello guy”的那一行代码在客户端执行，不会影响 PHP 脚本的运行方式。 Javascript 可以看到 DOM，但它需要将该信息传递给某些 PHP 脚本，因为 PHP 负责与数据库的接口(interface)。

您可能正在寻找的解决方案是 AJAX。为了让 PHP 知道客户端发生了什么，您需要将该信息返回。您可以简单地使用 html 表单并将编辑发布到 PHP 脚本，但在我看来您不希望用户离开/重新加载页面。设置某种事件处理程序以等待用户更改字段或任何有问题的元素。然后，通过 AJAX 发出请求，使用 POST 或 GET 推送编辑。然后您的 PHP 脚本可以插入/更新数据库中的记录。 Here's an MDN article关于从 AJAX 开始。此外，这里有一些 Javascript 可以让您了解您的解决方案可能是什么样子:

var fields = document.getElementsByClassName('updatable');

function send(event){
    if(event.type === 'blur' || event.keyCode === 13){
    xhr = new XMLHttpRequest();

    xhr.open('POST', 'path/to/php/script.php');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        if (xhr.status === 200) {
            alert('data pushed to server');
        }
        else if (xhr.status !== 200) {
            alert('Request failed.  Returned status of ' + xhr.status);
        }
    };
    xhr.send(encodeURI('field=' + event.target.id + '&value=' + event.target.value));
    }
}

for(var i = 0; i < fields.length; i++){
    fields[i].onkeypress = send;
    fields[i].onblur = send;
}

此脚本假定您要通过 AJAX 将值推送到的所有字段都具有可更新类，并且它对应的数据库列是 id。然后您的 PHP 脚本应该能够从 $_POST 获取数据。至少对于一个起点来说，这应该足够了。