[jQuery] Phương thức load()
Bài này chúng ta tìm hiểu hàm load().
Có 2 cách sử dụng:
- Load sự kiện javascript.
- Load dữ liệu từ server.
Hàm load() có cú pháp như sau:
load(url, parameters, callback)
Url: là địa chỉ của trang nguồn bạn đang cần lấy
Parameters: là một đối tượng lưu giữ các giá trị mà bạn muốn gửi đến server
Callback: là một hàm sẽ được gọi đến khi quá trình Ajax hoàn thành
Ví dụ 1:
[html]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ví dụ 1</title>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
$(‘img’).load(function(){
if($(this).height() > 100) {
$(this).css(‘border’,’5px solid red’);
}
})
});
</script>
</head>
<body>
<img src="images/nongdanit.png" alt="" />
</body>
</html>
[/html]
Ở ví dụ này khi chay file html, tấm hình sẽ được sẽ kiểm tra height > 100 sẽ có thêm border màu đỏ, các bạn có thể đổi tấm ảnh khác nhỏ hơn 100 sẽ không có border màu đỏ.
Ví dụ 2: Ở ví dụ này chúng ta chuẩn bị thêm một file test.txt có nội dung tuỳ ý. Chúng ta sẽ gọi nó trong hàm load và hiển thị nội dung đó lên.
[html]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ví dụ 2</title>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
$(‘button’).click(function(){
$(‘div’).load(‘doc/test.txt’);
});
});
</script>
</head>
<body>
<div>Nội dung hiển thị</div>
<button>Click</button>
</body>
</html>
[/html]
Ví dụ 3:
[html]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ví dụ 3</title>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
$(‘button’).click(function(){
$(‘div’).load(‘doc/test.txt’, function() {
alert(‘Nội dung đã được load.’);
});
});
});
</script>
</head>
<body>
<div>Nội dung hiển thị</div>
<button>Click</button>
</body>
</html>
[/html]
Trong ví dụ 3 nếu chạy file sẽ xuất hiện dòng ‘Nội dung hiển thị’, khi click vào button sẽ hiện ra nội dung trong file test.txt và bật thông báo cho chúng ta biết.
Nếu bạn gồm nhiều tham số, và muốn gửi những dữ liệu đó đến server thì hàm load() sẽ sử dụng phương thức POST, nếu bạn không có tham số nào thì hàm load() sẽ sử dụng phương thức GET.
Ví dụ 4: Trong ví dụ này chúng ta sẽ sử dụng tham số parameters và chúng ta sẽ truyền cho nó một tham số có tên key và tham số key có giá trị bằng 1. Trang này sẽ gửi giá trị key = 1 hoặc 2 qua một trang khác có tên là server.php. File server.php này sẽ kiểm tra giá trị key và trả về dữ liệu rồi hiển thị ra thẻ div
[html]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ví dụ 4</title>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
$("div").load("server.php", {key: 1});
});
</script>
</head>
<body>
<div>Thành phần div</div>
</body>
</html>
[/html]
Nội dung file server.php
[php]
<?php if($_POST["key"] == "1") {
echo ‘Giá trị truyền lên là 1’;
}else{
echo ‘Giá trị truyền lên khác 1’;
} ?>
[/php]
Thảm khảo thêm ở đây
[thongbao]
- Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
- Cảm ơn các bạn đã đọc.
[/thongbao]