Tìm hiểu jQuery Ajax

Ở bài trước chúng ta đã làm một ứng dụng nho nhỏ với Ajax bằng Javascript nhưng như tôi đã nói thường thì chúng ta sử dụng những thư viện JS có sẵn như Jquery để thực hiện, bởi vì thư viện jQuery hỗ trợ đầy đủ cho tất cả các browser nên chúng ta không cần phải kiểm tra các điều kiện về Browser như bài trước nữa.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Để các bạn dễ tiếp thì bài thì chúng ta sẽ thực hiện làm một ví dụ đơn giản tương tự như bài trước nhưng thay vì viết bằng Javascritp thuần thì chúng ta sử dụng jQuery. Để làm được bài này bạn phải biết cách sử dụng Jquery căn bản, biết một tí về Javascript và PHP nữa thì càng tốt nhé. Còn nếu chưa biết thì thì bạn nên ngừng đọc vì bài này không phù hợp với bạn.

1. Download thư viện jQuery

Bạn có thể lên trang chủ jquery để download bộ mới nhất.

2. Xây dựng các file trong ứng dụng

Tạo một project với tên là jquery_ajax, sau đó bạn tạo hai file index.php và result.php với nội dung như sau:

Bài viết này được đăng tại [free tuts .net]

File index.php:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <script language="javascript">
            function load_ajax(){
                
            }
        </script>
    </head>
    <body>
        <div id="result">
            Nội dung ajax sẽ được load ở đây
        </div>
        <input type="button" name="clickme" id="clickme" onclick="load_ajax()" value="Click Me"/>
    </body>
</html>

File result.php:

<?php 

echo 'Đây là nội dung trả về';

?>

Trong file index.php tôi có import một thư viện Jquery vào, đó là dòng:

<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>

Và cũng tương tự như bài trước, tôi có tạo một button, một thẻ div#result để chứa nội dung Ajax trả về và một hàm load_ajax() để khi click vào button thì hàm này được kích hoạt.

3. Viết code jquery ajax

Bây giờ bạn thay đổi nội dung của hàm load_ajax() trong file index.php như sau:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <script language="javascript">
            function load_ajax(){
                $.ajax({
                    url : "result.php",
                    type : "post",
                    dataType:"text",
                    data : {
                        
                    },
                    success : function (result){
                        $('#result').html(result);
                    }
                });
            }
        </script>
    </head>
    <body>
        <div id="result">
            Nội dung ajax sẽ được load ở đây
        </div>
        <input type="button" name="clickme" id="clickme" onclick="load_ajax()" value="Click Me"/>
    </body>
</html>

Các bạn có thể so sánh với đoạn code Javascript ở bài tìm hiểu ajax là gì và thấy bài này ta sử dụng jquery nên code rất là ngắn. Bạn chạy file index.php lên và click vào button thì sẽ thấy kết quả hoàn toàn giống nhau.

4. Tìm hiểu các thuộc tính jquery ajax

Sau ví dụ trên có lẽ bạn đang thắc mắc những thuộc tính mà tôi truyền vào trong hàm ajax là gì? Để các bạn không phải mất công tìm tòi thì tôi sẽ giải thích luôn. Nhưng trước khi tìm hiểu vào thì tôi xin lưu ý với các bạn rằng trong bài này tôi chỉ giải thích những thuộc tính quan trọng bắt buộc có, còn những thuộc tính khác ta sẽ tìm hiểu dần dần ở những bài tiếp theo.

Khi viết ajax trong jquery thì ta có cú pháp như sau:

$.ajax(args);

Trong đó args là một đối tượng object gồm các thuộc tính cơ bản sau:

url: đường dẫn đến file lấy kết quả
type: một trong hai phương thức post hoặc get
dataType: kiểu dữ liệu trả về, có thể là json, xml, script hoặc text
success : là hàm xử lý kết quả trả về, nó có tham số lưu trữ kết quả trả về đó là result. Như trong ví dụ trên tôi đã xử lý kết quả trả về bằng cách đổ nó vào trong thẻ div#result

Đây là 4 thuộc tính mà các bạn học được trong bài này. Tới những bài tiếp theo ta sẽ học thêm được nhiều thuộc tính khác nữa.

5. Kết thúc bài học

Bài này chỉ mang tính chất giới thiệu về jQuery Ajax nên chưa có ví dụ demo cụ thể mà các bạn sẽ tìm hiểu các ví dụ thông qua những bài tiếp theo của serie này, hy vọng qua bài này bạn sẽ thích thú với kỹ thuật Ajax và áp dụng nó vào Project của các bạn.

Danh sách file tải về

Tên file tải về	Pass giải nén
Tải bài học định dạng PDF	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP