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>

但是当插入数据库时，它是世界，而不是你好：

<?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>

我希望打个招呼的家伙被插入到数据库中，就像它在回显时显示的那样，但是不这样做。有什么解决办法吗？

Answer 1

从您的评论中看来，您似乎了解了为什么代码无法正常工作，但无论如何我都会解决。 PHP不知道将其输出发送到客户端后会发生什么情况。它看不到DOM发生的任何事情。将innerHTML更改为“ hello guy”的行在客户端执行，并且不会影响PHP脚本的运行方式。 Javascript可以看到DOM，但是由于PHP负责与数据库的接口，因此它需要将这些信息传递给某些PHP脚本。

您可能需要的解决方案是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将值推入的所有字段均具有可更新类，并且其对应的db列是id。然后，您的PHP脚本应该能够从$ _POST获取数据。至少对于起点，这应该足够。

Answer 2

执行此操作的最佳方法是ajax / xhr请求。

这是一个示例，其中我让用户输入一个ID号并上传一个Excel文件。

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function () {


    $("#simplePricingReportUpdateForm").submit(function (e) {

        e.preventDefault();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{!!csrf_token()!!}'
            }
        });

        var form = $('#simplePricingReportUpdateForm');
        var formData = new FormData(form[0]);
        formData.append("customerId", $('#customerId').val());

        $.ajax({
            method: 'POST',
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            cache: false,
            url: "/simplePricingReport/postAjax/",
            data: formData,
            xhrFields: {
                responseType: "blob"
            },
            "success": function (response) {
                var file = document.getElementById("ReportToUpdate");
                var filename = file.files[0].name;
                var a = document.createElement("a");
                var url = window.URL.createObjectURL(response);
                a.href = url;
                a.download = filename;
                a.click();
                window.URL.revokeObjectURL(url);
            }

        });
    });
});

使用该javascript之后，您将需要配置系统（无论是框架还是本地开发的），以在您指定的'url'处接受此请求。

在laravel中，我在路线上这样做

Route::post('simplePricingReport/postAjax','simplePricingReportController@postAjax');

当然，您可以在此处设置控制器。如果您正在做一些非常简单的事情，例如将变量保存到db字段中，那么只需将保存内容写入控制器就可以了。正确执行操作，但是您可能希望使用控制器来调用模型文件，然后该模型文件将具有将变量保存在数据库中的命令……并欢迎使用mvc land。

JavaScript DOM元素更改后将php变量插入数据库

2 个答案: