Javascript 如何使用JS和PHP | QA注释系统对不同的textarea执行CRUD

我在谷歌上搜索它，但不明白。我正在一个像stackoverflow这样的QA论坛上工作。我可以编写和处理PHP代码，但JS对我来说是个挑战。 正如你们所知，论坛上的每个问题都包含一个评论框，用户可以在其中发表评论。 我在单一文本区工作过。它的工作很酷，但当我为第二个答案创建第二个文本区域时，它不起作用。每次只有第一个文本区工作。 Index.php

<style>
body{width:40%;}
.message-box{margin-bottom:20px;border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
.btnEditAction{background-color:#2FC332;border:0;padding:2px 10px;color:#FFF;}
.btnDeleteAction{background-color:#D60202;border:0;padding:2px 10px;color:#FFF;margin-bottom:15px;}
#btnAddAction{background-color:#09F;border:0;padding:5px 10px;color:#FFF;}
</style>
<?php
require_once("config.php");

?>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function showEditBox(editobj,id) {
    $('#frmAdd').hide();
    $(editobj).prop('disabled','true');
    var currentMessage = $("#message_" + id + " .message-content").html();
    var editMarkUp = '<textarea rows="5" cols="80" id="txtmessage_'+id+'">'+currentMessage+'</textarea><button name="ok" onClick="callCrudAction(\'edit\','+id+')">Save</button><button name="cancel" onClick="cancelEdit(\''+currentMessage+'\','+id+')">Cancel</button>';
    $("#message_" + id + " .message-content").html(editMarkUp);
}
function cancelEdit(message,id) {
    $("#message_" + id + " .message-content").html(message);
    $('#frmAdd').show();
}
function callCrudAction(action,id) {
    $("#loaderIcon").show();
    var queryString;
    switch(action) {
        case "add":
        //get closest comment list box
      var selector = $(id).closest(".comment-list-box")
      //get text area and post id values
      var txtmessage = selector.find(".txtmessage").val()
      var postid = selector.find(".postid").val()
      console.log(txtmessage + " --" + postid)
            queryString = 'action=' + action+ '&txtmessage=' + txtmessage+'&postid='+ postid;
            
            
        break;
        case "edit":
            queryString = 'action='+action+'&message_id='+ id + '&txtmessage='+ $("#txtmessage_"+id).val();
        break;
        case "delete":
            queryString = 'action='+action+'&message_id='+ id;
        break;
    }    
    jQuery.ajax({
    url: "crud_action.php",
    data:queryString,
    type: "POST",
    success:function(data){
        switch(action) {
            case "add":
                $(".comment-list-box").append(data);
                 //selector.append(data);
      //empty the textareas 
   

            break;
            case "edit":
                $("#message_" + id + " .message-content").html(data);
                $('#frmAdd').show();
                $("#message_"+id+" .btnEditAction").prop('disabled','');    
            break;
            case "delete":
                $('#message_'+id).fadeOut();
            break;
        }
        $("#txtmessage").val('');
            $("#postid").val('');
        $("#loaderIcon").hide();
    },
    error:function (){}
    });
}
function commentdh() {
  $("#cbd").show();
   $("#cbd1").show();
}
</script>
<?php $res = mysqli_query($conn,"SELECT * FROM comment where postid=119"); ?> 
<div class="form_style">

<div class="comment-list-box">
<div id="frmAdd"><textarea name="txtmessage" class="txtmessage" cols="80" rows="2"></textarea>
<input type="hidden" value="119" name="postid" class="postid">
<p><button id="btnAddAction" name="submit" onClick="callCrudAction('add',this)">Add</button></p>
</div>
<img src="LoaderIcon.gif" id="loaderIcon" style="display:none" />
</div>
<?php
if(!empty($res)) {
while($comments=mysqli_fetch_array($res)) {
?>
<div class="message-box" id="message_<?php echo $comments['id'];?>">
<div class="message-content"><?php echo $comments['message']; ?></div>
<div>
<button class="btnEditAction" name="edit" onClick="showEditBox(this,<?php echo $comments['id']; ?>)">Edit</button>
<button class="btnDeleteAction" name="delete" onClick="callCrudAction('delete',<?php echo $comments['id']; ?>)">Delete</button>
</div>
</div>
<?php
}
} ?>
</div>

<?php $res = mysqli_query($conn,"SELECT * FROM comment where postid=120"); ?>

<div class="form_style">
<div class="comment-list-box">
<div id="frmAdd"><textarea name="txtmessage" class="txtmessage" cols="80" rows="2"></textarea>
<input type="hidden" value="120" name="postid" class="postid">
<p><button class="btnAddAction" name="submit" onClick="callCrudAction('add',this)">Add</button></p>
</div>
<img src="LoaderIcon.gif" id="loaderIcon" style="display:none" />
</div>
<?php
if(!empty($res)) {
while($comments=mysqli_fetch_array($res)) {
?>
<div class="message-box" id="message_<?php echo $comments['id'];?>">
<div class="message-content"><?php echo $comments['message']; ?></div>
<div>
<button class="btnEditAction" name="edit" onClick="showEditBox(this,<?php echo $comments['id']; ?>)">Edit</button>
<button class="btnDeleteAction" name="delete" onClick="callCrudAction('delete',<?php echo $comments['id']; ?>)">Delete</button>
</div>
</div>
<?php
}
} ?>
</div>



<!--    This may be 3,4,5, answers------ etc from database with comment box -->

这是我的数据库表，用于使用postid和注释id自动递增的注释。。。 我也提供了更简单的方法。 我的connecton文件- config.php

<?php
session_start();
$dbHost = 'localhost';
$dbName = 'test';
$dbUsername = 'root';
$dbPassword = '';
$conn= mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName); 
?>

---

您正在使用

id

获取

textarea

和

postid

输入框的值。但是，多个元素不能具有相同的id，因此使用

class

。现在，无论何时单击

add

按钮，您都可以在参数中传递

此

。此处，

此

将引用单击的当前元素，因此使用此选项，您可以使用

查找（）

和

最近的（）

来获取

注释列表框

中的输入值，该框中的按钮已被单击并传递到后端页面

演示代码：

function callCrudAction（操作，id）{
$（“#loaderIcon”）.show（）；
var查询串；
开关（动作）{
案例“添加”：
//“获取最近的注释”列表框
变量选择器=$（id）.closest（“.comment列表框”）
//获取文本区域和post id值
var txtmessage=selector.find（“.txtmessage”）.val（）
var postid=selector.find（“.postid”）.val（）
console.log（txtmessage+“--”+postid）
queryString='action='+action+'&txtmessage='+txtmessage+'&postid='+postid
打破
//其他代码
}
/*jQuery.ajax({
url:“crud_action.php”，
数据：查询字符串，
类型：“POST”，
成功：功能（数据）{*/
开关（动作）{
案例“添加”：
//选择器。追加（数据）；
selector.append（“ok”）；//仅用于演示。。
//清空文本区域
选择器.find（“.txtmessage”）.val（“”）；
打破
//其他代码
}
$（“#loaderIcon”）.hide（）；
/* },
错误：函数（）{}
});*/
}

加

某物
编辑
删除
加

美好的
编辑
删除

还有一件事只有第一个texarea值起作用。我已根据您的代码更改了代码，但未解决。您能显示更新的代码吗？您可以在上面的演示代码中看到..控制台正在打印正确的值。为什么要使用

id=“comment list box”

？这里的id应该是

class=“注释列表框”

。另外，不要清空帖子id输入，即：

$（“#posted”）.val（“”）为什么有
queryString='action='+action+'&txtmessage='+$（“.txtmessage”）.val（）+'&postid='+$（“.postid”）.val（）它应该是
queryString='action='+action+'&txtmessage='+txtmessage+'&postid='+postid。请根据我的代码进行更改。代码正在运行，但存在小问题。若我从第一个或第二个文本框中输入值，它将显示在两个文本区域的下方，但在referesh页面之后，它开始工作。我希望firxt textarea注释显示在唯一的第一个textarea下方，如果我使用socond textarea添加注释，则在引用之前，它应该显示在第二个textarea下方。我已经更新了代码。你可以用截图查看上面的内容。谢谢你的警告。现在我已经将代码更改为准备好的语句。
CREATE TABLE `comment` (
  `id` int(11) NOT NULL,
  `message` text NOT NULL,
  `postid` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

<?php
session_start();
$dbHost = 'localhost';
$dbName = 'test';
$dbUsername = 'root';
$dbPassword = '';
$conn= mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName); 
?>

$(document).on("click",".btnEditAction",function(){
var CommentId=$(this).closest(".Comment_Edit").find("message-box").text();
var Comment=$(this).closest(".Comment_Edit").find("message-content").text();
//Then Call Ajax Function
})