How Can I Retrieve MySQL Data Using jQuery AJAX?

Retrieving Data from MySQL Using jQuery AJAX

Enhancing interactivity in web applications requires a robust way to communicate with the server without refreshing the entire page. jQuery AJAX offers this capability by sending asynchronous requests and handling responses from the server. In this instance, we aim to retrieve data from a MySQL database.

The provided code snippet in list.php attempts to retrieve records using jQuery AJAX, but it fails to function properly. To address this, we'll craft an improved version that successfully retrieves data from the MySQL table.

JavaScript Code:

<script type="text/javascript">
$(document).ready(function() {
  $("#display").click(function() {
    $.ajax({
      type: "GET",
      url: "Records.php", 
      dataType: "html", 
      success: function(response) {                    
          $("#responsecontainer").html(response); 
      }
    });
  });
});
</script>

Explanation:

• The document ready function ensures the JavaScript code executes once the DOM is fully loaded.
• When the "display" button is clicked, an AJAX request is initiated using the $.ajax() function.
• The request is sent to the "Records.php" script using the GET method.
• We expect to receive HTML data in response, denoted by the dataType: "html" setting.
• On a successful response (HTTP status code 200), the response is populated into the "responsecontainer" div element, effectively displaying the data on the page.

PHP Code:

Connection:

<?php
$con=mysqli_connect("localhost","root","");
mysqli_select_db("simple_ajax",$con);

• This section establishes the MySQL connection and selects the "simple_ajax" database.

Query and Response:

$result=mysqli_query("select * from users",$con);
echo "<table border='1' >...";
while($data = mysqli_fetch_row($result)){ 
     // Display the fetched data in HTML table format 
}
echo "</table>";

• The query retrieves all records from the "users" table.
• The result is iterated, and each row's data is displayed within an HTML table.

Conclusion:

By following these revised steps, you can successfully retrieve data from a MySQL database using jQuery AJAX and populate it on the frontend as desired. This approach enables dynamic and interactive web applications without the need for full page reloads.

The above is the detailed content of How Can I Retrieve MySQL Data Using jQuery AJAX?. For more information, please follow other related articles on the PHP Chinese website!