Comment récupérer des données MySQL à l'aide de jQuery AJAX et les afficher sur une page Web sans rechargement ?

Utilisation de jQuery AJAX pour récupérer des données de MySQL

En utilisant AJAX (JavaScript asynchrone et XML) avec jQuery, vous pouvez récupérer des données d'un MySQL base de données et affichez-la sur une page Web sans recharger la page entière. Pour y parvenir, suivez ces étapes :

Code AJAX jQuery

Dans votre fichier HTML, incluez la bibliothèque jQuery et écrivez le code AJAX suivant :

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var response = '';
        $.ajax({
            type: "GET",
            url: "Records.php",
            async: false,
            success: function(text) {
                response = text;
            }
        });

        alert(response);
    });
</script>

Code PHP

Dans votre fichier Records.php, connectez-vous à la base de données MySQL et exécutez la requête pour récupérer les enregistrements :

$con = mysql_connect("localhost","root","");
$dbs = mysql_select_db("simple_ajax",$con);
$query = "SELECT Name, Address FROM users";
$result = mysql_query($query);

// Create the response in HTML format
$html = "";
while ($row = mysql_fetch_array($result)) {
    $html .= "<tr>
<td>$row[Name]</td>
<td>$row[Address]</td>
</tr>";
}

echo $html;

Résolution du problème

Le code fourni peut ne pas fonctionner pour vous pour les raisons suivantes :

• Votre list.php contient l'instruction alert(response) dans la fonction ready, qui alertera la réponse vide avant que la requête AJAX ne soit terminé.
• Votre code Records.php utilise les fonctions mysql_* obsolètes. Vous devez utiliser mysqli_* ou PDO pour la connectivité à la base de données.

Solution

Pour résoudre ces problèmes, modifiez votre code comme suit :

list.php

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "Records.php",
            async: false,
            success: function(text) {
                $("#div1 h2").html(text);
            }
        });
    });
</script>

Records.php

<?php $mysqli = new mysqli("localhost", "root", "", "simple_ajax");
if ($mysqli->connect_error) {
    die("Connection failed: " . $mysqli->connect_error);
}

$result = $mysqli->query("SELECT Name, Address FROM users");

// Create the response in HTML format
$html = "";
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
    $html .= "<tr>
<td>{$row['Name']}</td>
<td>{$row['Address']}</td>
</tr>";
}

$mysqli->close();
echo $html;

Avec ces changements, votre AJAX le code devrait réussir à récupérer les enregistrements de la base de données MySQL et à les afficher sur la page Web sans rechargement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!