AJAX Search trong PHP

Posted on by mtoplistChuyên mục:Top List

AJAX Search trong PHP

AJAX được sử dụng để giao tiếp với các Webpage và WebServer. Dưới đây là ví dụ minh họa một trường Search bởi sử dụng với AJAX.

<html>
   <head>
      
      <style>
         span{
            color: green;
         }
      </style>
      
      <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", "php_ajax.php?q=" + str, true);
               xmlhttp.send();
            }
         }
      </script>
      
   </head>
   <body>
      
      <p><b>Tìm kiếm khóa học:</b></p>
      
      <form>
         <input type="text" onkeyup="showHint(this.value)">
      </form>
      
      <p>Nhập tên khóa học: <span id="txtHint"></span></p>
   
   </body>
</html>

Code trên mở một file có tên php_ajax.php bởi sử dụng phương thức GET, vì thế chúng ta cần tạo một file có tên php_ajax.php trong cùng thư mục và output sẽ được đính kèm với txtHint.

Tệp php_ajax.php

File này chứa mảng tên khóa học và nó trả về giá trị tới trình duyệt web.

<?php
   // mảng các tên khóa học
   $a[] = "PHP";
   $a[] = "Android";
   $a[] = "Java";
   $a[] = "C";
   $a[] = "C++";
   $a[] = "C#";
   $a[] = "Python";
   $a[] = "HTML5";
   $a[] = "CSS";
   $a[] = "AngularJS";
   
   
   $q = $_REQUEST["q"];
   $hint = "";
   
   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";
            }
         }
      }
   }
   echo $hint === "" ? "Mời bạn nhập tên khóa học hợp lệ" : $hint;
?>

Quảng cáo

Lưu chương trình trên trong một file có tên là test.php trong htdocs, sau đó mở trình duyệt và gõ địa chỉ http://localhost:8080/test.php sẽ cho kết quả:

Ajax search trong PHP

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng….miễn phí. Tải ngay ứng dụng trên Android và iOS.


Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Các bạn ở Hà Nội có thể tham gia khóa học thứ 9 của vietjackteam (đang tuyển sinh) vào cuối tháng 10/2018 do anh Nguyễn Thanh Tuyền, admin vietjack.com trực tiếp giảng dạy tại Hà Nội. Chi tiết nội dung khóa học tham khỏa link :
Khóa học Java.Các bạn học CNTT, điện tử viễn thông, đa phương tiện, điện-điện tử, toán tin có thể theo học khóa này.
Số lượng các công việc Java hoặc .NET luôn gấp ít nhất 3 lần Android hoặc iOS trên thị trường tuyển dụng. Khóa online= Đi phỏng vấn, Khóa offline= Đi phỏng vấn+ 1.5 tháng thực tập ngoài doanh nghiệp.

Mọi người có thể xem demo nội dung khóa học tại địa chỉ Video demo khóa học Offline

Các bạn ở xa học không có điều kiện thời gian có thể tham dự khóa Java online để chủ động cho việc học tập. Từ tháng 4/2018, VietJack khuyến mại giá SỐC chỉ còn 250k cho khóa học, các bạn có thể trả lại tiền nếu không hài lòng về chất lượng trong 1 tháng, liên hệ facebook admin fb.com/tuyen.vietjack để thanh toán chuyển khoản hoặc thẻ điện thoại, khóa học bằng Tiếng Việt với gần 100 video, các bạn có thể chủ động bất cứ lúc nào, và xem mãi mãi. Thông tin khóa học tại Khóa học Java Online trên Udemy

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile…. mới nhất của chúng tôi.

Các bài học PHP phổ biến khác tại VietJack:

mtoplist