Ajax Database

Trong bài này sẽ trình bày ví dụ minh họa cách truy cập Database sử dụng kỹ thuật Ajax.

Chuẩn bị cơ sở dữ liệu: bảng user có nội dung như sau:

id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot

Trong ví dụ này sẽ tạo chức năng khi người dùng select tên của 1 user sẽ hiện ra bảng thông tin user đó

Tạo file index.php có mã như sau:

    <html>
    <head>
    <script>
        function showUser(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            } else {
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("txtHint").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","getuser.php?q="+str,true);
                xmlhttp.send();
            }
        }
    </script>
    </head>
    <body>
    <form>
    <select name="users" onchange="showUser(this.value)">
      <option value="">Select a person:</option>
      <option value="1">Peter Griffin</option>
      <option value="2">Lois Griffin</option>
      <option value="3">Joseph Swanson</option>
      <option value="4">Glenn Quagmire</option>
      </select>
    </form>
    <br>
    <div id="txtHint"><b>Person info will be listed here...</b></div>
    </body>
    </html>

Giải thích:

  • Trước tiên, kiểm tra xem người được chọn không. Nếu không có người nào được chọn (str == "")
  • Nếu một người được chọn, hãy làm như sau:

    • Tạo một đối tượng XMLHttpRequest
    • Sử dụng hàm onreadystatechange để lắng nghe các sự kiện từ máy chủ
    • Gửi yêu cầu tới tệp PHP (getuser.php) trên máy chủ
    • Lưu ý rằng tham số q được thêm vào url (getuser.php?q = " + str)
    • Và biến str chứa nội dung của trường đầu vào

Tệp PHP (getuser.php) truy vấn đối với cơ sở dữ liệu và trả về kết quả trong một bảng HTML

    <!DOCTYPE html>
    <html>
    <head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        table, td, th {
            border: 1px solid black;
            padding: 5px;
        }
        
        th {text-align: left;}
    </style>
    </head>
    <body>
        <?php
            $q = intval($_GET['q']);

            $con = mysqli_connect('localhost','peter','abc123','my_db');
            if (!$con) {
                die('Could not connect: ' . mysqli_error($con));
            }

            mysqli_select_db($con,"ajax_demo");
            $sql="SELECT * FROM user WHERE id = '".$q."'";
            $result = mysqli_query($con,$sql);

            echo "<table>
            <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
            <th>Hometown</th>
            <th>Job</th>
            </tr>";
            while($row = mysqli_fetch_array($result)) {
                echo "<tr>";
                echo "<td>" . $row['FirstName'] . "</td>";
                echo "<td>" . $row['LastName'] . "</td>";
                echo "<td>" . $row['Age'] . "</td>";
                echo "<td>" . $row['Hometown'] . "</td>";
                echo "<td>" . $row['Job'] . "</td>";
                echo "</tr>";
            }
            echo "</table>";
            mysqli_close($con);
        ?>
    </body>
    </html>
Xem ví dụ »