Heim > Backend-Entwicklung > PHP-Tutorial > Wie rufe ich MySQL-Daten mit jQuery AJAX ab und zeige sie auf einer Webseite an, ohne sie neu zu laden?

Wie rufe ich MySQL-Daten mit jQuery AJAX ab und zeige sie auf einer Webseite an, ohne sie neu zu laden?

Mary-Kate Olsen
Freigeben: 2024-12-01 10:38:09
Original
930 Leute haben es durchsucht

How to Retrieve MySQL Data Using jQuery AJAX and Display it on a Web Page Without Reloading?

Verwenden von jQuery AJAX zum Abrufen von Daten aus MySQL

Mithilfe von AJAX (Asynchronous JavaScript und XML) mit jQuery können Sie Daten aus MySQL abrufen Datenbank importieren und auf einer Webseite anzeigen, ohne die gesamte Seite neu laden zu müssen. Um dies zu erreichen, befolgen Sie diese Schritte:

jQuery-AJAX-Code

In Ihre HTML-Datei fügen Sie die jQuery-Bibliothek ein und schreiben Sie den folgenden AJAX-Code:

<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>
Nach dem Login kopieren

PHP-Code

Stellen Sie in Ihrer Records.php-Datei eine Verbindung zur MySQL-Datenbank her und führen Sie die Abfrage aus, um die Datensätze abzurufen:

$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;
Nach dem Login kopieren

Problem lösen

Der bereitgestellte Code funktioniert aus folgenden Gründen möglicherweise nicht für Sie:

  • Ihre list.php enthält die Anweisung „alert(response)“ in der Funktion „ready“, die die leere Antwort vor der AJAX-Anfrage benachrichtigt abgeschlossen.
  • Ihr Records.php-Code verwendet die veralteten mysql_*-Funktionen. Sie sollten mysqli_* oder PDO für die Datenbankkonnektivität verwenden.

Lösung

Um diese Probleme zu beheben, ändern Sie Ihren Code wie folgt folgt:

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>
Nach dem Login kopieren

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;
Nach dem Login kopieren

Mit diesen Änderungen wird Ihr AJAX Der Code sollte erfolgreich Datensätze aus der MySQL-Datenbank abrufen und sie ohne Neuladen auf der Webseite anzeigen.

Das obige ist der detaillierte Inhalt vonWie rufe ich MySQL-Daten mit jQuery AJAX ab und zeige sie auf einer Webseite an, ohne sie neu zu laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage