AJAX View Tabellendaten Schaltfläche Klicken Sie auf

Question

Ich möchte den Inhalt meiner Abfrage auf der gleichen Seite wie die Schaltfläche anzeigen, die die Abfrage initiiert.

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

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

Im Moment ist die Schaltfläche mir, enthält den Code unten action.php sendet

// dies ist mein 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>"; 

die oben zeigt die Ergebnisse in einer Tabelle Zum Anzeigen, Jetzt möchte ich AJAX verwenden, so dass das Ergebnis auf der gleichen Seite angezeigt wird, ohne erneut zu laden, anstelle der Aktion für die Schaltfläche, die auf den obigen Code umleitet. Ich brauche Hilfe, um zu verstehen, wie ich meinen Tisch wieder in den Erfolg meines Skripts bringen kann und wie man richtig formatiert. Hier ist mein Skript unter

// 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> 

Wie kann ich das bitte erreichen? Durch einen einfachen Klick auf die Schaltfläche wird die Abfrage (action.php) ausgeführt und keine Aktualisierung (AJAX) und Ergebnisse aus der Tabelle angezeigt auf der gleichen Seite als Schaltfläche. Danke im Voraus.

Answer 1

Auf Ihrer ersten Seite, wo das Formular ist, müssen Sie einen Wrapper hinzufügen, wo die Tabelle hinzugefügt werden soll. Etwas wie <div id="table_wrapper"></div>, die am Anfang leer sein wird. Dann, auf Ajax-Erfolg, müssen Sie nur die Nachricht erhalten, die der Ajax an Sie zurückgibt, und sie in das Wrapping-div setzen. So würde der Inhalt auf der ersten Seite sein:

<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> 

Und der Ajax-Aufruf:

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

Wenn Ihre Action-Funktion das gewünschte Ergebnis liefert, sollten Sie gut zu gehen.

UPDATE: Da es sich um eine Submit-Eingabe handelt, wird das Formular unabhängig vom Ajax-Aufruf gesendet und an das Skript action.php weitergeleitet. Eine Möglichkeit ist, die Taste, um einen regulären einreichen zu ändern, etwa so:

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

Eine bessere Möglichkeit, die einreichen Ereignis des Formulars zu fangen wäre. Die Ajax-Anforderung wird auf diese geändert:

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

Die return false das Ereignis nach der Ausführung des Ajax-Aufruf zu stoppen verursachen würde, so wird es verhindern, dass die actions.php umgeleitet wird. Sie können auch die event.preventDefault für diesen Zweck verwenden.

Hinweis Ich habe eine ID zum Formular html hinzugefügt.