Thứ Năm, 24 tháng 12, 2015

Ajax 4

12/24/2015 09:07:00 SA    No comments
Untitled Document

Bài 04: Phương thức GET trong jQuery Ajax
 0 
 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 10-08-2014 - Chuyên mục: PHP - View: 7510
Download Demo
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 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 để lấy danh sách hoặc chi tiết một bài nào đó.
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 và $.get.


1. Sử dụng Ajax GET với $.ajax

Như thường lệ, bạn tạo 2 file index.php và result.php với nội dung nhu sau:
File result.php


1
2
3
4
5
6
7
8
9
10
11
12

// 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 trước, 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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!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. Sử dụng Ajax 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:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

0 nhận xét:

Đăng nhận xét