使用Ajax / jQuery检索标记内的数据（内联文本编辑）(Retrieve data within tag using Ajax/jQuery (Inline text edit))

我已经在这个问题上工作了几个小时，但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正确更新edit_time 。

谢谢！

I've been working on this problem for a few hours, but there is some mistake somewhere in the javascript file (I believe), but I can't figure it out.

Right now the alert(msg) gives me an Undefined index: headline/text in editPost.php.

The following PHP code is in a file profile.php. I want to retrieve the data within the <div>I want this data</div> tags (i.e. I want to retrieve the data in $row['headline'] and $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>'; }

This is how I try to retrieve the data (seperate .js file):

$(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); } }); }); });

The function above then posts the data to editPost.php, which submits the data to a database. Below is a snippet of how I do that:

$headline = $_POST['headline']; $text = $_POST['text']; $id = $_POST['id']; $sql = "UPDATE blogpost SET headline = '$headline', text = '$text', edit_time = NOW(6) WHERE id = '$id'";

In the current state, when the data is sent to the database, it finds the correct table (using the id), and inserts "" in both the headline and text fields, but it updates the edit_time correctly.

Thank you!

最满意答案

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

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

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

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

I took a break for a few hours, and came back with more thoughts on how to solve it. After a little tweaking here and there, I finally did it.

For those of you who visit this thread at a later time, this is what I changed in order for it to work:

My profile.php snippet is now like this (I switched data-headline="headline" to name="headline" etc.):

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

My javascript file now consists of two functions with minor differences (one for each field). Yes, I'm certain there is a better way to solve this:

$(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); } }); }); });

I changed how the elements were targeted, so targeting one element wouldn't duplicate the content over to the other element.

Finally, in my editPost.php file, I added a check to see whether or not a variable is empty. If it is empty, that means the element didn't get updated, hence why it only updates the other element.

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

As you can see, the code itself is far from perfect (pretty horrible actually), but it works for now. I'll definitely try to improve on it in the future, but any feedback would be appreciated (I am aware this is not the place for codereview).

更多推荐

text,data,headline,id,电脑培训,计算机培训,IT培训"/> <meta name="descrip