我试图在加载php生成的表格中，在不刷新页面的情况下完成Ajax个POST请求.使用XMLHttprequest onload()在不刷新页面的情况下加载PHP表.通过使用onclick按钮触发POST请求，并且POST请求在php生成表内，然后通过Ajax Form Data Serize处理该请求.结果成功完成，但需要双击以覆盖加载函数并处理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>
我已经try 了下面的代码，但它不起作用.
$(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;
});
感谢大家关注我的问题.