Phương thức GET trong jQuery Ajax - Học Ajax - PHP Ajax - 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 ...
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.
- 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ạnginput_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=12thì tôi đã gửi lên server ba thông tin với phương thức GET gồmtask=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 : valuesẽ 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.
