【发布时间】：2020-05-27 07:05:04
【问题描述】：
这是一个使用 jQuery、Ajax、PHP、MySQL 和 HTML 的评论系统。当我单击编辑按钮时，它显示 MySQL 表的第一行的注释，而不是我选择的行。但是，一旦我编辑它，它会更正正确的行。我想不出一种方法来显示我要编辑的行的评论。
我可以将行的正确comment_id 显示到textarea 中，但是它将第一行的注释显示到textarea 中。
这里是测试用例代码：
MySQL 表有两行：comment_id 为主行，comment 为文本。我将数据库命名为：testcaseedit_db，将表命名为：tbl_comment。
index.php
<?php $connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', ''); ?>
<div id="display_comment"></div>
<div id="comment_message"></div>
<div id="display_edit"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
let count = 0;
$(document).on('click change', '.edit, .submit', function(e) {
if ($(this).is('.edit')) {
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
var closestDiv = $('button').closest('div.panel');
$('.div.panel').not(closestDiv.next('.div.panel')).hide();
closestDiv.next('div.panel').slideToggle(100);
var commentEdit = $('#display_comment').find('#editable').html();
++count;
const htmlString =
`<form id="comment_form${count}" class="input-group form-row" action="edit.php" method="post" enctype="multipart/form-data">
<div class="input-group-prepend">
<textarea name="comment" id="comment${count}" class="form-control" rows="30" cols="160">
${commentEdit} ${comment_id}
</textarea>
</div>
<div class="input-group-prepend">
<input type="hidden" name="comment_id" id="comment_id" value="${comment_id}" />
<input type="submit" name="submit" id="submit" class="submit btn btn-info" value="Save" form="comment_form${count}" />
</div>
</form>`;
$('#display_comment')[0].insertAdjacentHTML('afterend', htmlString);
} else if ($(this).is('.submit')) {
$.ajax({
url:"edit.php",
method:"POST",
data: new FormData(this),
contentType: false,
processData: false,
success:function(data)
{
if(data.error != '') {
$('#comment_form')[0].reset();
$('#comment_id').val(comment_id);
$('#comment').val(comment);
}
}
});
location.reload();
$(this).closest('form').submit();
e.stopPropagation();
} else {
return false;
}
});
// Fetch comment
function load_comment(){
$.ajax({
url:"fetch.php",
method:"POST",
success:function(data){
$('#display_comment').html(data);
}
})
};
load_comment();
// End of (document).ready(function){}
});
</script>
</body>
</html>
fetch.php
<?php
$connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', '');
$query = "
SELECT * FROM tbl_comment WHERE comment_id = comment_id
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';
foreach($result as $row) {
$output .= '
<div class="panel panel-default">
<div class="panel-heading"> <b> comment_id: </b> '.$row["comment_id"].' </div>
<div class="panel-body"><b> Comment: </b> <br> <span id="editable"> '.$row["comment"].' </span> </div>
<div class="panel-footer" align="right">
<button type="button" class="btn btn-default edit" id="'.$row["comment_id"].'">Edit</button>
</div>
</div>
';
}
echo $output;
?>
edit.php
<?php
$connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', '');
$comment_id = $_POST["comment_id"];
$comment = $_POST["comment"];
if ( $error == '' && !empty($_POST["comment"]) ) {
$query = "UPDATE tbl_comment SET comment = :comment WHERE comment_id = :comment_id ";
$statement = $connect->prepare($query);
$statement->execute(
array(
':comment_id' => $comment_id,
':comment' => $comment
)
);
header("Location: index.php");
}
$data = array(
'error' => $error
);
echo $error;
?>
【问题讨论】：
-
在您的 fetch.php 文件中，您似乎没有将 comment_id 传递给执行 - $statement->execute();也许这就是问题所在？
-
将相同的
new PDO(...)语句装订到每个文件中是不可持续的。考虑使用包含文件。 -
@Funck Doc，comment_id 没有任何问题。我可以将它显示到文本区域中。问题出在评论上。
-
@tadman，这只是一个测试用例。
-
当然，但它也需要更少的时间来修复而不是永久化。它一开始就不应该进入这种状态。只是在这里提出建议以节省您的时间和精力。
标签： php jquery html mysql ajax