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.

test php

banquyen png

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

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. 

  • 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$.get.

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

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

Bài viết này được đăng tại [phpbbvietnam.com]

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 cheeky.

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.

Danh sách file tải về

Bài viết này, The Learn PHP Tutorial Đã gửi đến bạn đọc kiến thức về “Phương thức GET trong jQuery Ajax❤️️”. Admin hy vọng qua phần nội dung trong bài”Phương thức GET trong jQuery Ajax” có thể giúp bạn đọc có thêm kiến thức về “Phương thức GET trong jQuery Ajax trong quá trình tự học PHP của mình .

Bài viết “Phương thức GET trong jQuery Ajax” posted by on 2022-07-02 12:25:08. Cảm ơn bạn đọc đã xem bài viết tại Phpbbvietnam.com Và đừng quên chia sẻ bài viết này để nhiều người khác cũng có thể xem tài liệu học php miễn phí này nhé.

Read More:   [Module User] - Viết hàm phân trang
Back to top button