Cipta aplikasi Ajax menggunakan PHP dan jQuery-tutorial php-php.cn

Cipta aplikasi Ajax menggunakan PHP dan jQuery

WBOY

Lepaskan： 2023-05-11 15:24:01

asal

600 orang telah melayarinya

Dengan pembangunan aplikasi web yang berterusan, Ajax telah menjadi alat berkuasa yang boleh berkomunikasi dengan pelayan tanpa muat semula halaman. Menggunakan Ajax, anda boleh meningkatkan prestasi dan kebolehgunaan aplikasi web dan meningkatkan pengalaman pengguna.

Artikel ini akan memperkenalkan cara membuat aplikasi Ajax menggunakan PHP dan jQuery. Kami akan membuat halaman pertanyaan mudah di mana pengguna boleh memasukkan kata kunci dan menghantarnya ke pelayan menggunakan teknologi Ajax. Pelayan akan mencari pangkalan data dan mengembalikan hasil yang berkaitan, yang akan dipaparkan secara dinamik pada halaman web tanpa memuat semula.

Sebelum anda mula, sila pastikan anda telah memasang PHP dan jQuery Kami akan menggunakan PHP untuk mengendalikan permintaan pertanyaan dan jQuery untuk menghantar permintaan Ajax dan memproses hasil yang dikembalikan.

Langkah 1: Cipta fail HTML

Mula-mula, kami perlu mencipta fail HTML sebagai halaman pertanyaan kami. Di bawah ialah templat fail HTML asas, yang termasuk kotak teks dan butang.

<!DOCTYPE html>
<html>
<head>
  <title>Ajax Search</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    //Ajax代码将放在这里
  </script>
</head>
<body>
  <h1>Ajax Search</h1>
  <input type="text" id="keyword" name="keyword" placeholder="Enter Keyword">
  <button id="search">Search</button>

  <div id="results">
    <!-- 结果将在这里动态显示 -->
  </div>

</body>
</html>

Salin selepas log masuk

Langkah 2: Buat fail PHP

Seterusnya, kita perlu mencipta fail PHP untuk memproses permintaan pertanyaan. Berikut ialah contoh kod yang mengendalikan permintaan pertanyaan:

<?php
//连接到数据库
$db = mysqli_connect('localhost', 'username', 'password', 'database_name');

//检查连接是否成功
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  exit();
}

//从查询字符串中获取关键字
$keyword = $_GET['keyword'];

//构建查询
$sql = "SELECT * FROM products WHERE name LIKE '%".$keyword."%'";
$result = mysqli_query($db, $sql);

//检查查询是否成功
if (!$result) {
  echo 'Could not run query: ' . mysqli_error($db);
  exit();
}

//将结果转换为JSON格式并输出
$rows = array();
while($row = mysqli_fetch_assoc($result)) {
    $rows[] = $row;
}
echo json_encode($rows);

//关闭连接
mysqli_close($db);
?>

Salin selepas log masuk

Kod ini akan membuat pertanyaan untuk produk yang mengandungi kata kunci dan menukar hasilnya kepada format JSON. Seterusnya, kami akan menggunakan jQuery untuk menghantar permintaan Ajax dan mengendalikan hasil yang dikembalikan.

Langkah Tiga: Tulis Kod Ajax

Sekarang, kita boleh menggabungkan kod di atas untuk mencipta aplikasi Ajax yang lengkap. Berikut ialah kod jQuery kami:

$(document).ready(function() {
    $('#search').click(function() {
        var keyword = $('#keyword').val();
    
        // 发送Ajax请求
        $.ajax({
            url: 'search.php',
            dataType: 'json',
            data: {
                keyword: keyword
            },
            success: function(data) {
                // 处理返回的结果
                var results = '';
                $.each(data, function(index, value) {
                    results += '<div>';
                    results += '<h3>' + value['name'] + '</h3>';
                    results += '<p>' + value['description'] + '</p>';
                    results += '<p>Price: ' + value['price'] + '</p>';
                    results += '</div>';
                });
    
                $('#results').html(results);
            },
            error: function(jqxhr, textStatus, error) {
                // 处理错误
                var err = textStatus + ", " + error;
                console.log( "Request Failed: " + err );
            }
        });
    });
});

Salin selepas log masuk

Kod ini termasuk acara klik yang akan mendapat kata kunci apabila pengguna mengklik butang carian dan menghantar permintaan menggunakan Ajax. Permintaan akan dihantar ke fail search.php, yang akan menanyakan pangkalan data dan mengembalikan hasil dalam format JSON. Setelah keputusan berjaya diterima, kami akan menggunakan jQuery untuk mencipta HTML hasil secara dinamik dan memaparkannya pada halaman.

Kami kerap menggunakan kaedah $.ajax jQuery untuk mengendalikan permintaan tak segerak, yang memberi kami banyak kawalan lanjutan dan membolehkan kami mengendalikan semua jenis data dengan cara yang sangat mudah.

Apa yang perlu diperhatikan di sini ialah dua fungsi panggil balik ajax dalam jQuery, kejayaan dan ralat. Kejayaan mewakili panggilan balik yang berjaya, dan ralat mewakili panggilan balik pengecualian. Jadi, apabila pelayan mengembalikan data dengan jayanya, data akan dihantar ke fungsi panggil balik kejayaan, dan kemudian kod logik perniagaan kami akan memproses data yang dikembalikan. Apabila pengecualian berlaku dalam permintaan, contohnya, pelayan dipaksa secara kasar dan mengembalikan kod status 403, kod kami akan menerima pengecualian daripada fungsi panggil balik ralat dan melaksanakan pemprosesan yang berkaitan, seperti memaparkan maklumat pengecualian kepada pengguna.

Langkah Empat: Uji Aplikasi

Kini, kami boleh menguji permohonan kami. Buka fail HTML, masukkan kata kunci dan klik butang carian. Anda sepatutnya melihat hasil yang berkaitan muncul secara dinamik pada halaman tanpa memuat semula.

Jika anda menghadapi masalah, anda boleh menyemak log konsol untuk sebarang mesej ralat atau melihat kod PHP untuk memastikan ia berfungsi dengan betul.

Kesimpulan

Menggunakan PHP dan jQuery, kami boleh mencipta aplikasi Ajax yang berkuasa dengan mudah. Ajax menjadikan aplikasi web lebih pantas dan lebih responsif, meningkatkan pengalaman pengguna. Kini anda boleh mencipta aplikasi Ajax anda sendiri menggunakan PHP dan jQuery dan meningkatkan prestasi dan kebolehgunaan aplikasi web anda.

Atas ialah kandungan terperinci Cipta aplikasi Ajax menggunakan PHP dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!