AJAXテーブルデータのボタンをクリックします。

Question

私のクエリの内容を、クエリを開始するボタンと同じページに表示したいとします。ボタンは、それが以下のコード

//これは私の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>"; 

上記ディスプレイ表の結果が含まれていaction.phpために私を送り、現時点で

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

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

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

、あなたが行くように良いことがあります。

UPDATE：送信入力であるため、フォームは送信され、ajax呼び出しに関係なくaction.phpスクリプトにリダイレクトされます。フォームの提出イベントをキャッチすることです

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

良い方法：一つの方法は、そのような正規1に送信ボタンを変更することです。

$('#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; 
}); 

リターン偽のイベントはAJAX呼び出しを実行した後に停止させるようなので、actions.phpにリダイレクト防ぐことができます：AJAX要求は、これに変更されます。その目的でevent.preventDefaultを使用することもできます。

注意IDをフォームhtmlに追加しました。