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 ...
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.
$.post(url, params, callback)
Trong đó:
Ví dụ: Mình vẫn sử dụng ví dụ trước.
File index.html
<html>
<head>
<title>Simple 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>
<label>Nhậ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:
$.get(url, params, callback)
Trong đó:
Ví dụ:
<html>
<head>
<title>Jquery 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>
<label>Nhậ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....
