触发Ajax post请求时绕过PHP生成表的加载功能

问题描述 投票：0回答：1

我正在尝试执行

Ajax
发布请求，而无需在加载 php 生成的表中刷新页面。使用 
XMLHttprequest
onload()
加载 PHP 表，无需刷新页面。 post请求是通过使用
onclick
按钮触发的，它位于php生成的表中，然后通过
Ajax
表单数据序列化处理请求。结果成功了，但是需要双击来覆盖加载函数并处理
Ajax
post 请求。因此，我来这里问一个问题，我可以单击一下完成该过程吗？

这是我的全部代码：

 <?php
require_once "db_conn.php";

$Host_ID = $_GET['Host_ID'];
$sql = "Select * from Chat_List inner join Chat_Room on Chat_List.Room_ID = Chat_Room. Room_ID 
        where Chat_List.Chat_ID = $Host_ID order By Chat_Room.Update_time DESC";
$row = mysqli_query($conn, $sql);

?>

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Chat_Search.css">
</head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
 
function ChatRoomSearch(){
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function(e){
    document.getElementById("table3").innerHTML = this.responseText;
    //document.getElementById("Check").trigger("Click");
  }

  xhttp.open("GET", "Chat_Search.php?Host_ID="+Host_ID, true);
  xhttp.send();
}
setInterval(function(){
     ChatRoomSearch(); 
  }, 3000);


</script>
<body>
<?php
$Host_ID = $_GET['Host_ID'];
echo"<script> var Host_ID = '$Host_ID';</script>";
?>

<table id = 'table3' border = 1 cellpadding = 10>
<tr>
<th>ID</th>
<th>Friend</th>
<th>Message</th>
<th>Room ID</th>
<th>Action</th>
</tr>
<?php foreach($row as $row):
?>
<tr>
<td><?php 
    if ($row["Invitor"] != $Host_ID){
        echo $row["Invitor"];
    }else{
        echo $row["Host"];
    }
?></td>
<td><?php echo $row["Room_Message"]; ?></td>
<td><?php echo $row["Room_ID"]; ?></td>
<td>
  <?php
  if ($row["status"] == 'confirm' and $row["Invitor"] == $Host_ID){
  ?>
<form id = "form<?php echo $row["Room_ID"]; ?>" action="Chat_Room_Confirm.php">
  <input type="text" name="Room_ID" id="Room_ID<?php echo $row["Room_ID"]; ?>" value="<?php echo $row["Room_ID"]; ?>">
  <input type="text" name="Room_status" id="Room_status<?php echo $row["Room_ID"]; ?>" value="Chat">
  <input type="button" class="myinput" id="myinput<?php echo $row["Room_ID"]; ?>" value="Invite" >
  <script>
$(document).on('click', function(event){
    event.preventDefault();
   $('#myinput<?php echo $row["Room_ID"]; ?>').on ('click' ,function(){
      var form = $('#form<?php echo $row["Room_ID"]; ?>');
      var Room_ID = $('#Room_ID<?php echo $row["Room_ID"]; ?>').val();
      var Room_status = $('#Room_status<?php echo $row["Room_ID"]; ?>').val();
      var formData = form.serialize();
      $.ajax({
         url:form.attr("action"),
         method:"POST",
         data:formData,
         cache:false,
         success:function(){
           alert('Data Send');
         }
      });
   });
   return false;
});
  </script>
</form>
  <?php } ?>
</td>
</tr>
<?php endforeach; ?>
</table>
</body>
</html>

我已经尝试了下面的代码，但它不起作用。

$(document).ready(function(){
   $('#myinput<?php echo $row["Room_ID"]; ?>').on ('click' ,function(event){
      event.preventDefault();      
      var form = $('#form<?php echo $row["Room_ID"]; ?>');
      var Room_ID = $('#Room_ID<?php echo $row["Room_ID"]; ?>').val();
      var Room_status = $('#Room_status<?php echo $row["Room_ID"]; ?>').val();
      var formData = form.serialize();
      $.ajax({
         url:form.attr("action"),
         method:"POST",
         data:formData,
         cache:false,
         success:function(){
           alert('Data Send');
         }
      });
   });
   return false;
});

感谢大家看我的问题。

javascript php jquery xmlhttprequest ajaxform
1个回答
0
投票

双击触发的原因是因为您已经指定了两次单击的功能：

$(document).on('click', function(event) {

然后

$(document).on('click', '#myinput<?php echo $row["Room_ID"]; ?>', function (event) {

您可以将 

click
函数替换为以下内容：

$(document).on('click', '#myinput<?php echo $row["Room_ID"]; ?>', function (event) {
    var form = $('#form<?php echo $row["Room_ID"]; ?>');
    var Room_ID = $('#Room_ID<?php echo $row["Room_ID"]; ?>').val();
    var Room_status = $('#Room_status<?php echo $row["Room_ID"]; ?>').val();
    var formData = form.serialize();
    $.ajax({
        url: form.attr("action"),
        method: "POST",
        data: formData,
        cache: false,
        success: function () {
            alert('Data Send');
        }
    });
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.