Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Phương thức GET trong jQuery Ajax

Bài trước chúng ta đã tìm hiểu phương thức POST trong ajax, nhưng vẫn còn môt phương thức khác cũng rất thường được sử dụng đó là phương thức GET, đây là phương thức chúng ta rất hay sử dụng ngoài frontend để xây dựng chức năng hiển thị bài viết trong cơ sở dữ liệu.

Quay lại với kiến thức PHP, như bạn biết khi ta gửi thông tin lên server với phương thức GET thì ta sẽ có hai cách.

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ách 1: Sử dụng form với method = GET, như vậy khi ta submit thì url sẽ tự động thêm các tham số dạng input_name = input_value.
Cách 2: Ta truyền trực tiếp tham số vào URL. Ví dụ tôi gõ url domain.com?task=news&action=edit&id=12 thì tôi đã gửi lên server ba thông tin với phương thức GET gồm task=news, action=edit, id=12.

Cũng tương tự như POST, jQuery cung cấp chúng ta hai cách sử dụng Ajax với phương thức GET đó là $.ajax và $.get.

1. Phương thức GET với $.ajax

Bạn tạo 2 file index.php và result.php với nội dung nhu sau:

File result.php

// Nhập giá trị number bằng phương thức post
$number = isset($_GET['number']) ? (int)$_GET['number'] : false;

// Kiểm tra number có lớn hơn không hay không
if (!$number){
    die ('<h1>Vui lòng nhập một số lớn hơn không (0)</h1>');
}

// Lặp từ 1 tới number để in ra màn hình
for ($i = 1; $i <= $number; $i++){
    echo '<li>Số: '.$i.'</li>';
}

Nội dung bên trong rất quen thuộc và rất giống với bài AJAX POST, chỉ khác một điều là thay vì bài trường dùng $_POST thì bài này ta dùng $_GET.

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()
            {
                $.ajax({
                    url : "result.php", // gửi ajax đến file result.php
                    type : "get", // chọn phương thức gửi là get
                    dateType:"text", // dữ liệu trả về dạng text
                    data : { // Danh sách các thuộc tính sẽ gửi đi
                         number : $('#number').val()
                    },
                    success : function (result){
                        // Sau khi gửi và kết quả trả về thành công thì gán nội dung trả về
                        // đó vào thẻ div có id = result
                        $('#result').html(result);
                    }
                });
            } 
    
        </script>
    </head>
    <body>
        <div id="result">
            Nội dung ajax sẽ được load ở đây
        </div>
        <br/>
        <input type="text" value="" id="number"/>
        <input type="button" name="clickme" id="clickme" onclick="load_ajax()" value="Click Me"/>
    </body>
</html>

File này cũng vậy, thay vì ở bài trước tôi dùng type : "post" thì tôi dùng type : "get"

Chạy lên bạn sẽ thấy kết quả như mong đợi .

2. Phương thức GET với $.get

Cũng tương tự như $.post, cú pháp của $.get là:

jQuery.get( url [, data ] [, success ] [, dataType ] )

Trong đó:

url: đường dẫn đến file cần lấy thông tin
data: là một đối tượng object gồm các key : value sẽ gửi lên server
success: là hàm sẽ xử lý khi thực hiện thành công
dataType: là dạng dữ liệu trả về. (text, json, script, xml)

Bây giờ bạn thay đổi nội dung hàm load_ajax() như sau:

function load_ajax()
{
    // URL
    var url = "result.php";

    // Data
    var data = {
        number : $('#number').val()
    };

    // Success Function
    var success = function (result){
        $('#result').html(result);
    };

    // Result Type
    var dataType = 'text';

    // Send Ajax
    $.post(url, data, success, dataType);
}

Các bạn reload và chạy lại và thấy kết quả hoàn toàn giống nhau.

3. Truyền dưới dạng tham số trong url

Như tôi đề cập ở đầu bài, với phương thức GET ta có thể truyền dưới dạng URL. Như vậy thì trong ajax ta hoàn toàn làm được bằng cách gắn tham số đó vào trong URL gửi đi.

Các bạn xem ví dụ dưới đây:

function load_ajax()
{
    // URL có kèm tham số number
    var url = "result.php?number="+$('#number').val();

    // Data lúc này cho bằng rỗng
    var data = {};

    // Success Function
    var success = function (result){
        $('#result').html(result);
    };

    // Result Type
    var dataType = 'text';

    // Send Ajax
    $.get(url, data, success, dataType);
}

4. Lời kết

Phương thức GET trong Ajax thường được dùng trong các trường hợp thao tác không ảnh hưởng tới cơ sở dữ liệu đó là thao tác SELECT, vì vậy bạn cần cân nhắc khi sử dụng phương thức GET và POST phù hợp với từng trường hợp cụ thể.

Bài này giúp bạn hiểu cách sử dụng phương thức GET trong Ajax, nếu có vấn đề thắc mắc bạn có thể comment bên dưới để mình biết và giải đáp thắc mắc cho bạn.

Tổng hợp dữ liệu trong bài:

[ Tải bài học định dạng PDF]

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