tutorial pengembangan web terbaru
 

PHP - AJAX dan PHP

❮ Sebelumnya Berikutnya Bab ❯

AJAX digunakan untuk membuat aplikasi yang lebih interaktif.

AJAX PHP Contoh

Contoh berikut akan menunjukkan bagaimana sebuah halaman web dapat berkomunikasi dengan server web sementara tipe user karakter dalam sebuah field input:

Contoh

Start typing a name in the input field below:

First name:

Suggestions:

misalnya Dijelaskan

Dalam contoh di atas, ketika seorang pengguna jenis karakter di bidang input, fungsi yang disebut " showHint() " dijalankan.

Fungsi ini dipicu oleh peristiwa onkeyup.

Berikut adalah kode HTML:

Contoh

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Menjalankan contoh »

Kode penjelasan:

Pertama, periksa apakah field input kosong (str.length == 0) . Jika ya, jelas isi dari placeholder txtHint dan keluar fungsi.

Namun, jika field input tidak kosong, lakukan hal berikut:

  • Membuat objek XMLHttpRequest
  • Buat fungsi yang akan dijalankan ketika respon server siap
  • Kirim permintaan ke sebuah file PHP (gethint.php) pada server
  • Perhatikan bahwa parameter q ditambahkan gethint.php? Q = "+ str
  • Variabel str memegang isi dari field input

PHP File - "gethint.php"

File PHP memeriksa array nama, dan mengembalikan sesuai name(s) ke browser:

<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>

❮ Sebelumnya Berikutnya Bab ❯