Bagaimana untuk Dapatkan Data MySQL Menggunakan jQuery AJAX dan Paparkan pada Halaman Web Tanpa Muat Semula?

Menggunakan jQuery AJAX untuk Mendapatkan Data daripada MySQL

Menggunakan AJAX (Asynchronous JavaScript dan XML) dengan jQuery, anda boleh mendapatkan data daripada MySQL pangkalan data dan memaparkannya pada halaman web tanpa memuatkan semula keseluruhan halaman. Untuk mencapai matlamat ini, ikuti langkah berikut:

Kod AJAX jQuery

Dalam fail HTML anda, masukkan perpustakaan jQuery dan tulis kod AJAX berikut:

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

Kod PHP

Dalam fail Records.php anda, sambung ke pangkalan data MySQL dan laksanakan pertanyaan untuk mendapatkan semula rekod:

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

Menyelesaikan Isu

Kod yang disediakan mungkin tidak berfungsi untuk anda kerana sebab berikut :

• list.php anda mempunyai pernyataan alert(respons) dalam fungsi sedia, yang akan memberi amaran kepada respons kosong sebelum permintaan AJAX telah selesai.
• Kod Records.php anda menggunakan fungsi mysql_* yang tidak digunakan lagi. Anda harus menggunakan mysqli_* atau PDO untuk sambungan pangkalan data.

Penyelesaian

Untuk menyelesaikan isu ini, ubah suai kod anda sebagai berikut:

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;

Dengan perubahan ini, AJAX anda kod seharusnya berjaya mendapatkan semula rekod daripada pangkalan data MySQL dan memaparkannya pada halaman web tanpa memuatkan semula.

Atas ialah kandungan terperinci Bagaimana untuk Dapatkan Data MySQL Menggunakan jQuery AJAX dan Paparkan pada Halaman Web Tanpa Muat Semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!