Question

我已经在这个问题上工作了几个小时，但javascript文件中的某个地方出现了一些错误（我相信），但我无法弄清楚。

现在警报（msg）给了我一个Undefined index: headline/text in editPost.php。

以下PHP代码位于文件profile.php中。我想检索<div>I want this data</div>代码中的数据（即我想要检索$row['headline']和$row['text']中的数据。

while ($row = mysqli_fetch_array ($resultPost, MYSQLI_ASSOC)) {
    echo '<h1><div contenteditable="true" data-headline="headline" data-id=' . $row['id'] . '>' . $row['headline'] . '</div></h1>';
    echo '<p><div contenteditable="true" data-text="text" data-id=' . $row['id'] . '>' . $row['text'] . '</div></p>';
}

这是我尝试检索数据的方式（单独的 .js 文件）：

$(document).ready(function() {
$('body').on('blur', "div[contenteditable=true]", function() {

    var headline = $("div[data-name='headline']:visible").text();
    var text = $("div[data-name='text']:visible").text();
    $.ajax({
        type: 'POST',
        url: 'editPost.php',
        data: {
            content: $.trim($(this).text()),
            id: $(this).data('id'),
            headline: $(this).data(headline),
            text: $(this).data(text),
        },
        success: function(msg) {
            alert(msg);
        }
    });
});
});

然后，上面的函数将数据发布到editPost.php，$headline = $_POST['headline']; $text = $_POST['text']; $id = $_POST['id']; $sql = "UPDATE blogpost SET headline = '$headline', text = '$text', edit_time = NOW(6) WHERE id = '$id'";将数据提交到数据库。以下是我如何做到的片段：

""

在当前状态下，当数据发送到数据库时，它会找到正确的表（使用id），并在标题和文本字段中插入edit_time，但它会更新{{1正确的。

谢谢！

Answer 1

我休息了几个小时，回过头来想想如何解决它。在这里和那里稍微调整之后，我终于做到了。

对于那些稍后访问此帖子的人来说，这是我为了让它工作而改变的：

我的profile.php代码段就像这样（我将data-headline="headline"切换为name="headline"等。）

while ($row = mysqli_fetch_array ($resultPost, MYSQLI_ASSOC)) {
    echo '<h1><div contenteditable="true" name="headline" data-id=' . $row['id'] . '>' . $row['headline'] . '</div></h1>';
    echo '<p><div contenteditable="true" name="text" data-id=' . $row['id'] . '>' . $row['text'] . '</div></p>';
}

我的javascript文件现在包含两个功能略有不同的功能（每个字段一个）。是的，我确定有更好的方法可以解决这个问题：

$(document).ready(function() {
$('body').on('blur', "div[name=headline]", function() {

    var headline = $("div[name='headline']:visible").text();
    $.ajax({
        type: 'POST',
        url: 'editPost.php',
        data: {
            headlineContent: $.trim($(this).text()),
            id: $(this).data('id'),
            headline: $(this).data(headline),
        },
        success: function(msg) {
            alert(headline);
        }
    });
});
});

$(document).ready(function() {
$('body').on('blur', "div[name=text]", function() {

    var text = $("div[name='text']:visible").text();
    $.ajax({
        type: 'POST',
        url: 'editPost.php',
        data: {
            textContent: $.trim($(this).text()),
            id: $(this).data('id'),
            text: $(this).data(text),
        },
        success: function(msg) {
            alert(text);
        }
    });
});
});

我更改了元素的定位方式，因此定位一个元素不会将内容复制到另一个元素。

最后，在我的editPost.php文件中，我添加了一个检查以查看变量是否为空。如果它是空的，那意味着元素没有更新，因此它只更新了另一个元素。

$headline = $_POST['headlineContent'];
$text = $_POST['textContent'];
$id = $_POST['id'];
if (!empty($headline)) {
    $sql = "UPDATE blogpost SET headline = '$headline', edit_time = NOW(6) WHERE id = '$id'";
} elseif (!empty($text)) {
    $sql = "UPDATE blogpost SET text = '$text', edit_time = NOW(6) WHERE id = '$id'";
}

正如您所看到的，代码本身远非完美（实际上非常可怕），但它现在可以正常工作。我将来肯定会尝试改进它，但任何反馈都会受到赞赏（我知道这不是代码审查的地方）。

使用Ajax / jQuery（内联文本编辑）在<div>标记内检索数据

1 个答案: