Bài 03: JQuery ajax POST và GET

Hàm $.ajax() là hàm tổng quát trong JQuery ajax khi bạn sử dụng hàm này bạn có nhiều tuy chọn hơn bằng cách bạn có thể truyền được nhiều thuộc tính hơn đi đôi với nó là sẽ có nhiều hàm xử lý kết quả và xử lý lỗi hơn.

Hai hàm $.post() và $.get() là hai hàm được bóc tách từ hàm tổng quát nhưng mỗi hàm chỉ sử dụng duy nhất một phương thức truyền dữ liệu mà thôi.

1. $.post() với phương thức POST.

Với phương thực này cho phép chúng ta thực thi ajax gửi dữ liệu lên từ client nên server-side theo phương thức POST. Tương ứng với nó phía server-side sẽ lấy dữ liệu bằng phương thức HTTP POST REQUEST.

Cú pháp.

1	`$.post(url, params, callback)`

Trong đó:

Url: Là địa chỉ của file[hàm] xử lý dữ liệu phía server-side.
Params: Là một đối tượng lưu giữ các biến gửi lên server
Callback: Là hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành

Ví dụ: Mình vẫn sử dụng ví dụ trước.

File index.html

html
head
titleSimple Ajax Example/title
script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/script
script type="text/javascript"
function xmlhttpPost() {
     $.post("result.php", {'w': $('input[name=word]').val()},
        function(result){
            $("#result").html(result);
        }
    );
}
/script
/head
body
form name="f1"
  p
    labelNhập vào một câu/label
    input name="word" type="text"
    input value="Go" type="button" onclick='JavaScript:xmlhttpPost(); return false;'
  /p
  div id="result"/div
/form
/body
/html

File result.php

?php 
    $w = isset($_POST['w']) ? trim($_POST['w']) : 'Empty';
    echo 'Bạn đã nhập vào câu: strong'.$w.'strong'; die();
?

Xem kết quả

2. $.get() với phương thức GET.

Với phương thực này cho phép chúng ta thực thi ajax gửi dữ liệu lên từ client nên server-side theo phương thức GET. Tương ứng với nó phía server-side sẽ lấy dữ liệu bằng phương thức HTTP GET REQUEST.

Cú pháp:

1	`$.get(url, params, callback)`

Trong đó:

Url: Là địa chỉ của file[hàm] xử lý dữ liệu phía server-side.
Params: Là một đối tượng lưu giữ các biến gửi lên server
Callback: Là hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành

Ví dụ:

html
    head
        titleJquery ajax GET/title
        script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/script
        script type="text/javascript"
        function xmlhttpPost() {
             $.get("result.php", {'w': $('input[name=word]').val()},
                function(result){
                    $("#result").html(result);
                }
            );
        }
    /script
    /head
    body
    form name="f1"
      p
        labelNhập vào một câu/label
        input name="word" type="text"
        input value="Go" type="button" onclick='JavaScript:xmlhttpPost(); return false;'
      /p
      div id="result"/div
    /form
    /body
/html

File result.php

?php 
    $w = isset($_GET['w']) ? trim($_GET['w']) : 'Empty';
    echo 'Bạn đã nhập vào câu: strong'.$w.'strong'; die();
?

3. Tổng kết

Thông qua các bài viết này có lẽ bây giờ bạn đã hiểu phần nào kỹ thuật ajax sử dụng JQuery. ajax đã là một kỹ thuật tuyệt vời rồi sự kết hợp giữa JQuery và ajax làm cho ajax càng trờ nên mạnh mẽ hơn bao giờ hết. Ajax được ứng dụng trong các chức năng về phân trang, tìm kiếm, submit form, upload file, load nội dung....