檢索內的數據 <div> 使用Ajax / jQuery標記（內聯文本編輯）

Question

我已經在這個問題上工作了幾個小時，但是javascript文件中的某個地方有一些錯誤（我相信），但是我無法弄清楚。

現在，alert（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 。

謝謝！

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'";
}

如您所見，代碼本身還遠遠不夠完美（實際上相當可怕），但是它現在可以正常工作。 我肯定會在將來對此進行改進，但是任何反饋將不勝感激（我知道這不是進行codereview的地方） 。