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);
     }
    });
});

如果你的动作函数返回想要的结果，你应该好好去。

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

<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;
});

返回false会导致事件在执行ajax调用后停止，因此会阻止重定向到actions.php。您也可以使用event.preventDefault来实现此目的。

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

AJAX查看表数据按钮单击

1 个答案: