Question

我想通过ajax和php制作评论系统。此代码仅提交第一篇帖子评论。其他人发表评论不起作用。当其他评论发布并进入其重新加载页面。只有第一篇帖子评论完美无缺。请帮我解决这个问题。

我的HTML：

  $data = $con->query($sql);
  if($data->num_rows>0){
    while($row = $data->fetch_array(MYSQLI_ASSOC))
    {          
      echo '<div class="box-footer">';
      echo '<form id="comment_form" name="comment_form" method="post">';
      echo '<img class="img-responsive img-circle img-sm" src="http://localhost/admin/dist/img/user1-128x128.jpg" alt="Alt Text">';
      echo '<div class="img-push">';
      echo '<input type="hidden" name="post_id" id="post_id" value="'.$id.'">';
      echo '<input type="text" class="form-control input-sm" name="comment" id="comment" placeholder="Press enter to post comment">';
      echo '</div>';
      echo '</form>';
      echo '</div>';
    }
 }

提交功能是：

$(document).ready(function(){
        $("#comment_form").submit(function(e){
          e.preventDefault();

          if (document.getElementById("comment").value == "") {
            swal("ERROR", "Please write a comment first", "error");
          } else {
              var user_id = <?php echo $user_id; ?>;
              var post_id = document.getElementById("post_id").value;
              var comment = document.getElementById("comment").value;

              var dataString =  'userid=' + user_id + '&post_id=' + post_id + '&comment=' + comment;
              $.ajax({
                type: "POST",
                url: "commentupload.php",
                data: dataString,
                cache: false,
                success: function(html) {
                  var status = html;
                  if(status == 0){   
                    swal("Success", "Comment Added!", "success"); 
                    post_id = "";
                    comment = "";
                    document.getElementById("post_id").value = "";
                    document.getElementById("comment").value = "";
                  }
                  else if(status == 1) {
                    swal("ERROR", "Something went wrong!", "error");  location.reload();
                  }
                  else {   
                    swal("ERROR", status, "error");             
                  }
                }
              });
              return false;
          }
        });
      });

Answer 1

我建议这个解决方案
在HTML中。类似的东西

<form action="url" method="POST" class="my-form">
    <input type="hidden" name="post_id" value="x">
    <input type="text" name="comment">
    <input type="submit">
</form>

<form action="url" method="POST" class="my-form">
    <input type="hidden" name="post_id" value="y">
    <input type="text" name="comment">
    <input type="submit">
</form>

在JS中

$(".my-form").submit(function(event){
    // Stop all form submit event
    event.preventDefault();

    $(".my-form").each(function (key, form){
        // Check not empty form
        if ($(form).find('input[name="comment"]').val() != ''){
            // Do ajax
            $.ajax({
                url: url,
                method: 'POST',
                data: $(form).serialize(),
                success: function(response){
                }
            })
        }
    });
});

输入印刷机上的ajax多表格提交

1 个答案: