AJAX查看表数据按钮点击

Question

我想在启动查询的按钮所在的页面上显示我的查询内容。

 <form action="action.php" method="post">

<input type="submit" class="button" id="mail-button" name='msubmit'      value="View Mail" />

此时按钮将我发送到包含以下代码的 action.php

//这是我的action.php

if (isset($_POST['mail-button'])) {  // if the view message button is click

include('..\time.php');
include('..\db.php');
$con = mysqli_connect($dbsrvname, $dbusername, $dbpassword, $dbname);


$delete = mysqli_query($con,"DELETE FROM notopen WHERE username= '".$_COOKIE[$cookie_name]."' AND value='1'");

$q = mysqli_query($con,"SELECT * FROM tbl1 WHERE username = '".$_COOKIE[$cookie_name]."'");
   while($row = mysqli_fetch_assoc($q)){
       //echo $row['id'];
       $id = $row['id'];
       $username = $row['username'];


$q = mysqli_query($con,"SELECT * FROM inbox WHERE rcpuser= '".$_COOKIE[$cookie_name]."' AND senderid ORDER BY time DESC
  LIMIT 20");
// I WOULD LIKE TO DISPLAY THESE RESULTS BACK ON THE SAME PAGE AS THE BUTTON WHILE USING AJAX TO AVOID PAGE REFRESHING
echo  '<table border="1" width="500px">';
echo'<tr>';

echo '<table class="table table-fixed  table-bordered table-hover">'; 

echo "<tr><th>From</th><th>Message</th><th>Time-Date</th></tr><tr>"; 

while($row = mysqli_fetch_assoc($q))
{



//echo $row['senderid']; // to reply back to sender
$senerid = $row['senderid'];
echo "<tr><td>"; 

echo "<a href=message.php?id=".$senerid.">Reply to : </a>";
echo $row['username']; // username of sender
echo "</td><td>";   
echo $row['message'];
echo "</td><td>";    
echo "time_passed"($row['time']);  //time_passed calling funtion

echo "</td></tr>"; 



}
echo "</table>"; 

上面将结果显示在表格中以供查看，现在我想使用 AJAX，因此结果显示在同一页面上而无需重新加载，而不是按钮重定向到上述代码的操作。我需要帮助了解如何让我的表格在我的脚本上显示成功以及如何正确格式化 .下面是我的脚本

 // I dont want to redirect  here, I want my script to execute and have  the results displayed back on this page
<form action="action.php" method="post">



  <script src="/js/jquery.js"></script>

<script>
$('#mail-button').on('click', function() {
var info = $('#name').val();
$.ajax({
method: "POST",
url: "action_mail_view.php",
data: {
  name: info
},
 success: function(response){                    
 $("#table_wrapper").html(response); 
 //alert(response);
  }

  });

 });

</script>


<table border="1" align="center">
<tr>
<td>  <input type="button" class="button" id="mail-button"   name='name'     value="View Mail" /> </td>
</tr>
</table>
 <div id="table_wrapper"></div>

请问我该如何实现？只需单击按钮，即可执行查询 (action.php)，并且不刷新 (AJAX) 并且表格的结果与按钮显示在同一页面上。提前致谢。

Answer 1

在表单所在的初始页面上，您需要在应该添加表格的位置添加一个包装器。像<div id="table_wrapper"></div> 这样的东西，一开始是空的。然后，在 ajax 成功时，您只需要获取 ajax 返回给您的消息并将其设置在包装 div 中。所以，第一页上的内容是：

<form id="mail-form" action="action.php" method="post">
    <input type="submit" class="button" id="mail-button" name='msubmit'     value="View Mail" />
</form>
<div id="table_wrapper"></div>

还有 ajax 调用：

$('#mail-button').on('click', function() {
    var info = $('#name').val();
    $.ajax({
    method: "POST",
    url: "action.php",
    data: {
      name: info
    },
    success: function(status) {
      $('#table_wrapper').html(status);
     }
    });
});

如果您的操作函数返回想要的结果，那么您应该可以开始了。

更新：由于它是一个提交输入，因此表单将被提交并重定向到 action.php 脚本，而不管 ajax 调用如何。一种方法是将提交按钮更改为常规按钮，如下所示：

<input type="button" class="button" id="mail-button" name='msubmit'     value="View Mail" />

更好的方法是捕获表单的提交事件。 ajax请求会改成这样：

$('#mail-form').submit(function() {
    var info = $('#name').val();
    $.ajax({
    method: "POST",
    url: "action.php",
    data: {
      name: info
    },
    success: function(status) {
      $('#table_wrapper').html(status);
     }
    });
    return false;
});

return false 将导致事件在执行 ajax 调用后停止，因此它会阻止重定向到 actions.php。您也可以为此使用event.preventDefault。

注意我在 html 表单中添加了一个 id。