Fatal编程技术网
  • javascript/
  • Javascript 带有while循环的PHP-AJAX提交表单

Javascript 带有while循环的PHP-AJAX提交表单

javascript php jquery html ajax

Javascript 带有while循环的PHP-AJAX提交表单,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我正在制作一个实时评论功能。这里的问题是，当我对注释进行注释时，注释是成功的，但是数据被插入的次数与窗体在while循环中出现的次数相同。我认为我应该从表状态为每个表单分配一个单独的状态id（sts\u id），并在ajax代码中进行更改，以便它只提交一次数据，而不是像在while循环中创建表单那样多次提交数据。例如，由于表单处于while循环中，并且有6个状态帖子，因此当我对状态进行注释时，注释会被插入6次。还有一个问题，即注释函数目前仅在while循环中的第一个表单上工作。在其他表格上，表格

我正在制作一个实时评论功能。这里的问题是，当我对注释进行注释时，注释是成功的，但是数据被插入的次数与窗体在while循环中出现的次数相同。我认为我应该从表状态为每个表单分配一个单独的状态id（
sts\u id
），并在ajax代码中进行更改，以便它只提交一次数据，而不是像在while循环中创建表单那样多次提交数据。例如，由于表单处于while循环中，并且有6个状态帖子，因此当我对状态进行注释时，注释会被插入6次。还有一个问题，即注释函数目前仅在while循环中的第一个表单上工作。在其他表格上，表格提交不起作用，即未提交评论。我认为添加单独的ID也可以解决这个问题。请帮忙

HTML部分

<script>
       function ajaxFunction(){
  var ajaxRequest; 
  try{
      ajaxRequest = new XMLHttpRequest();
  }catch (e){
      try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
        try{
           ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e){
           // Something went wrong
           alert("Your browser broke!");
           return false;
        }
      }
  }
  $('.commentarea').keydown(function(event) {
    var id = $(this).attr('id');
    var status_id = id.replace("postcomment_", "");
    if($.trim($("#postcomment_"+status_id).val())) {
      if(event.keyCode == 13) {
        event.preventDefault();
        $("form#form_id_"+status_id).on('submit', function (e) {
          e.preventDefault();
          var comment = $('#postcomment_'+status_id).val();
          var statsid = status_id;
          var myData = {"comment": comment, "statsid": statsid};
          $.ajax({
            url: "post-comment.php",
            type: "POST",
            data: myData,
            success: function (data, status, xhr) {
              $(".showbox").html(data); // output result
              $('#postcomment').val('');
            }
          });
        });
      }
    }
  });
}
</script>

    <div class="stats-cont">
<?php 
$get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";

$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();

while($get_stf = $get_stq->fetch()){ extract($get_stf); 

$get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
$get_cmtq = $pdo->prepare($get_cmts);
$get_cmtq->bindValue(':status', $sts_id);
$get_cmtq->execute();
$total_cmts = $get_cmtq->rowCount();
?>
<div class="status-note-block status-container">
  <div class="member-name-container">
    <div class="mem-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="40" width="40">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="40" width="40">
      <?php } ?>
    </div>
    <div class="member-name"><?php echo $mem_name; ?><br>
      <small>
      <?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
      <?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
  </div>
  <div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
  <div class="comment-reaction-holder"></div>
  <?php while($fetch_cmts = $get_cmtq->fetch()){ extract($fetch_cmts); ?>
  <div class="comment-flex-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <div class="showbox"><font color="#5B5899" style="font-size: 12px"><b><?php echo $mem_name; ?></b></font> <?php echo $cmt_comment; ?><br />
      <font style="font-size:12px">Like &middot; Reply &middot; Just now</font></div>
  </div>
  <br />
  <?php } ?>
    <div id="showbox"></div>
  <div class="commet-field-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="form_id_<?php echo $sts_id?>">
      <input type="hidden" name="status_id" value="<?php echo $sts_id; ?>" id="statsid_<?php echo $sts_id?>" />
      <textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment_<?php echo $sts_id?>" onclick='ajaxFunction()'></textarea>
    </form>
  </div>
</div>
<?php } ?>


函数ajaxFunction（）{
var ajaxRequest；
试一试{
ajaxRequest=新的XMLHttpRequest（）；
}捕获（e）{
试一试{
ajaxRequest=newActiveXObject（“Msxml2.XMLHTTP”）；
}捕获（e）{
试一试{
ajaxRequest=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}捕获（e）{
//出了点问题
警告（“你的浏览器坏了！”）；
返回false；
}
}
}
$（'.commentarea'）.keydown（函数（事件）{
var id=$（this.attr（'id'）；
var status_id=id.replace（“后命令”，”）；
if（$.trim（$（“#post comment_uu”+status_id）.val（）））{
如果（event.keyCode==13）{
event.preventDefault（）；
$（“表单#表单#id uu”+状态u id）。在（'submit'，函数（e）上{
e、 预防默认值（）；
var comment=$（'#post comment'+status_id）.val（）；
var statsid=状态\u id；
var myData={“comment”：comment，“statsid”：statsid}；
$.ajax({
url:“post comment.php”，
类型：“POST”，
数据：myData，
成功：功能（数据、状态、xhr）{
$（“.showbox”）.html（数据）；//输出结果
$（'后命令'）.val（''）；
}
});
});
}
}
});
}
“height=“40”width=“40”>


“height=“30”width=“30”>


Like·；答复·；刚才


“height=“30”width=“30”>
post-comment.php部分：

    <?php
//error_reporting(0);
include('config/db.php');
$time = date('Y-m-d H:i:s');

$content   = (!empty($_POST['comment']))?$_POST['comment']:null;
$status_id = (!empty($_POST['statsid']))?$_POST['statsid']:null;

$insert = "INSERT INTO `comments`(`cmt_comment`,`cmt_status`, `cmt_time`)VALUES(:comment, :status, :time)";
$inserq = $pdo->prepare($insert);
$inserq->bindValue(':comment', $content);
$inserq->bindValue(':status', $status_id);
$inserq->bindValue(':time', $time);
$inserq->execute();
$lastid = $pdo->lastInsertId();

$sel = "SELECT * FROM comments 
        LEFT JOIN status ON comments.cmt_status = status.sts_id 
        LEFT JOIN members ON members.mem_id = status.sts_mem
        WHERE comments.cmt_id = :lastid";
$seq = $pdo->prepare($sel);
$seq->bindValue(':lastid', $lastid);
$seq->execute();
$sef = $seq->fetch();
?>

<div class="comment-flex-holder">
  <div class="comment-img-thumb">
    <?php if($sef['mem_image'] == null){ ?>
    <img src="images/user.png" height="30" width="30">
    <?php }else{ ?>
    <img src="users/<?php echo $sef['mem_image']; ?>" height="30" width="30">
    <?php } ?>
  </div>
  <div class="showbox"><font color="#5B5899" style="font-size: 12px"><b><?php echo $sef['mem_name']; ?></b></font> <?php echo $sef['cmt_comment']; ?><br />
    <font style="font-size:12px">Like &middot; Reply &middot; Just now</font></div>
</div>
<br />


“height=“30”width=“30”>


Like·；答复·；刚才
若要在注释框中保持唯一性，应使用计数器。这将创建动态名称和id。同样，您需要在ajax调用中获取
$（this.attr（'data-counter'）

您可以检查以下代码并根据需要进行设置

<script>
    function ajaxFunction(){
        var ajaxRequest; 
        try{
            ajaxRequest = new XMLHttpRequest();
        }catch (e){
            try{
              ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e) {
              try{
                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
              }catch (e){
                 // Something went wrong
                 alert("Your browser broke!");
                 return false;
              }
            }
        } 
    $('.postcomment').keydown(function(event) {
        if($.trim($(".postcomment").val())) {
            if(event.keyCode == 13) {
                event.preventDefault();
                $("form.cmtform").submit();
            }
        }   
    });
    $("form.cmtform").on('submit', function(e) {
        e.preventDefault();
        var counter_val = $(this).attr('data-counter');
        var comment = $('#postcomment_' + counter_val).val(); 
        var statsid = $('#statsid_' + counter_val).val(); 
        var myData={"comment":comment, "statsid":statsid};
        $.ajax({
            url : "post-comment.php",
            type: "POST",
            data : myData,
            success: function(data,status,xhr){
                $(".showbox").html(data); // output result
                $('#postcomment_' + counter_val).val();
            }
        }); 
    }); 
    }
</script>

<div class="stats-cont">
<?php 
    $get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";

$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();
    $counter = 1;
    while($get_stf = $get_stq->fetch()){ extract($get_stf); 

    $get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
    $get_cmtq = $pdo->prepare($get_cmts);
    $get_cmtq->bindValue(':status', $sts_id);
    $get_cmtq->execute();
    $total_cmts = $get_cmtq->rowCount();
    $fetch_cmts = $get_cmtq->fetch();
?>
<div class="status-note-block status-container">
  <div class="member-name-container">
    <div class="mem-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="40" width="40">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="40" width="40">
      <?php } ?>
    </div>
    <div class="member-name"><?php echo $mem_name; ?><br>
      <small>
      <?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
      <?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
  </div>
  <div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
  <div class="comment-reaction-holder"></div>
  <div class="commet-field-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <div class="showbox"></div>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" data-counter="<?php echo $counter;?>">
       <input type="hidden" name="status_id_<?php echo $counter;?>" value="<?php echo $sts_id; ?>" id="statsid_<?php echo $counter;?>" />
      <textarea name="comment_<?php echo $counter;?>" placeholder="Give a comment..." class="postcomment comment-field commentarea" id="postcomment_<?php echo $counter;?>" onclick='ajaxFunction()'></textarea>
     </form>
  </div>
</div>
    <?php 
    $counter++;
} 
?>


函数ajaxFunction（）{
var ajaxRequest；
试一试{
ajaxRequest=新的XMLHttpRequest（）；
}捕获（e）{
试一试{
ajaxRequest=newActiveXObject（“Msxml2.XMLHTTP”）；
}捕获（e）{
试一试{
ajaxRequest=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}捕获（e）{
//出了点问题
警告（“你的浏览器坏了！”）；
返回false；
}
}
} 
$（'.postcomment'）.keydown（函数（事件）{
if（$.trim（$（“.postcomment”）.val（））{
如果（event.keyCode==13）{
event.preventDefault（）；
$（“form.cmtform”）.submit（）；
}
}   
});
$（“form.cmtform”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var counter_val=$（this.attr（'data-counter'）；
var comment=$（'#post comment'+counter_val）.val（）；
var statsid=$（'#statsid'+counter_val）.val（）；
var myData={“comment”：comment，“statsid”：statsid}；
$.ajax({
url:“post comment.php”，
类型：“POST”，
数据：myData，
成功：功能（数据、状态、xhr）{
$（“.showbox”）.html（数据）；//输出结果
$（'#post comment'+counter_val）.val（）；
}
}); 
}); 
}
“height=“40”width=“40”>


“height=“30”width=“30”>
干杯

自，而循环有n个形式。因此，每个表单和输入值都有不同的ID。在您的问题中，每个输入都声明了相同的ID。因此，不允许使用同名的多个ID。身份证不可能是一样的

首先，您需要更改每个输入ID。更简单的方法是，将状态ID附加到每个ID。它将自动更改

如果你想使用这个答案，那么你需要复制我的答案。而不是在代码中修改。因为，你们可能会留下几行，然后结果会是“不起作用”。所以，试试这个代码。如果有任何问题，请随时询问

更新代码

<script>
function ajaxFunction(){
  var ajaxRequest; 
  try{
      ajaxRequest = new XMLHttpRequest();
  }catch (e){
      try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
        try{
           ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e){
           // Something went wrong
           alert("Your browser broke!");
           return false;
        }
      }
  }
  $('.commentarea').keydown(function(event) {
    var id = $(this).attr('id');
    var status_id = id.replace("postcomment_", "");
    if ($.trim($("#postcomment_"+status_id).val())) {
      if (event.keyCode == 13) {
        event.preventDefault();
        $("form#form_id_"+status_id).on('submit', function (e) {
          e.preventDefault();
          var comment = $('#postcomment_'+status_id).val();
          var statsid = status_id;
          var myData = {"comment": comment, "statsid": statsid};
          $.ajax({
            url: "post-comment.php",
            type: "POST",
            data: myData,
            success: function (data, status, xhr) {
              $(".showbox").html(data); // output result
              $('#postcomment').val();
            }
          });
        });
      }
    }
  });
}
</script>

<div class="stats-cont">
<?php 
$get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";

$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();

while($get_stf = $get_stq->fetch()){ extract($get_stf); 

$get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
$get_cmtq = $pdo->prepare($get_cmts);
$get_cmtq->bindValue(':status', $sts_id);
$get_cmtq->execute();
$total_cmts = $get_cmtq->rowCount();
$fetch_cmts = $get_cmtq->fetch();
?>
<div class="status-note-block status-container">
  <div class="member-name-container">
    <div class="mem-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="40" width="40">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="40" width="40">
      <?php } ?>
    </div>
    <div class="member-name"><?php echo $mem_name; ?><br>
      <small>
      <?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
      <?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
  </div>
  <div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
  <div class="comment-reaction-holder"></div>
  <div class="commet-field-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <div class="showbox"></div>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="form_id_<?=$sts_id?>">
      <input type="hidden" name="status_id" value="<?php echo $sts_id; ?>" id="statsid_<?=$sts_id?>" />
      <textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment_<?=$sts_id?>" onclick='ajaxFunction()'></textarea>
    </form>
  </div>
</div>
<?php } ?>


函数ajaxFunction（）{
var ajaxRequest；
试一试{
ajaxRequest=新的XMLHttpRequest（）；
}捕获（e）{
试一试{
ajaxRequest=newActiveXObject（“Msxml2.XMLHTTP”）；
}捕获（e）{
试一试{
ajaxRequest=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}捕获（e）{
//出了点问题
警告（“你的浏览器坏了！”）；
返回false；
}
}
}
$（'.commentarea'）.keydown（函数（事件）{
var id=$（this.attr（'id'）；
var status_id=id.replace（“后命令”，”）；
if（$.trim（$（“#post comment_uu”+status_id）.val（）））{
如果（event.keyCode==13）{
event.preventDefault（）；
$（“表单#表单#id uu”+状态u id）。在（'submit'，函数（e）上{
e、 预防默认值（）；

<script>
    function ajaxFunction(){
      var ajaxRequest; 
      try{
          ajaxRequest = new XMLHttpRequest();
      }catch (e){
          try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
          }catch (e) {
            try{
               ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
               // Something went wrong
               alert("Your browser broke!");
               return false;
            }
          }
      }
      $('.commentarea').keydown(function(event) {
              var id = $(this).attr('id');
              var status_id = id.replace("postcomment_", "");
              if ($.trim($("#postcomment_"+status_id).val())) {
                if (event.keyCode == 13) {
                        event.preventDefault();
                        postcomment(status_id);
                }
              }
            });
            function postcomment(status_id){
                var comment = $('#postcomment_'+status_id).val();
                    var statsid = status_id;
                    var myData = {"comment": comment, "statsid": statsid};
                    $.ajax({
                        url: "post-comment.php",
                        type: "POST",
                        data: myData,
                        success: function (data, status, xhr) {
                            $(".showbox").html(data); // output result
                            $('#postcomment').val();
                        }
                    });
            }
    }
    </script>