Chia sẽ kiến thức và kinh nghiệm về Javascript
Trong Series này các bạn sẽ được tìm hiểu về Redux là gì một cách nhanh nhất có thể. Mọi kiến thức được tóm gọn ít nhất qua các ví dụ thực tiễn thay vì chỉ lý thuyết suông rồi mới thực hành. Nên sẽ rất phù hợp với người mới chưa biết gì về Redux sẽ nhanh chóng nắm bắt được nó hơn so với cách thông thường là phải thông qua tài liệu của Redux và làm từng bước giống họ.
Reducer là gì? Chắc hẳn đây là câu hỏi mà đa số người dùng sử dụng qua thư viện của Redux hoặc vô tình biết qua phương thức reduce() này nên sẽ thắc mắc về nó.
(Bài viết này có bao gồm một số kiến thức ở bài Tìm hiểu về Mutable và Immutable Object trong Javascript)
Reducer được dùng thay thế cho vòng lặp ở một số nhiệm vụ nhất định, giúp cho việc viết Code nhanh hơn. Nên các bạn cũng không cần quá bận tâm nếu như các bạn thật sự không thích cách làm việc này của nó mà có thể thay thế bằng các vòng lặp khác như for, foreach, map…
Bắt kịp với xu hướng mới, trong Video này chúng ta cùng tìm hiểu về 2 khái niệm Mutable Object và Immutable Object khác nhau như thế nào? Và tại sao chúng ta nên sử dụng chúng? Nhất là xu thế hiện tại rất chuộng bộ đôi “sát thủ” React + Redux. Hãy cùng tôi tìm hiểu nó các bạn nhé!
Trong ReactJS, mỗi đoạn code sẽ được phân chia thành những Component không lệ thuộc lẫn nhau và có thể tái sử dụng khi cần thiết. Vì vậy trong bài viết này chúng ta sẽ tìm hiểu cách viết và sử dụng Component như thế nào trong ReactJS.
import React, { Component } from 'react';
// Ví dụ 1
let Tab_let = () => {
return (
<div>Khởi tạo bằng let</div>
);
};
// Ví dụ 2
const Tab_const = () => {
return (
<div>Khởi tạo bằng const</div>
);
};
// Ví dụ 3 - const hoặc let đều được
const Tab_shorthand = () => (
<div>Cách tắt khi dùng Arrow Function</div>
);
// Ví dụ 4
function Tab_function() {
return (
<div>Khởi tạo bằng Function</div>
);
}
// Ví dụ 5
class Tab_class extends Component {
render() {
return (
<div>Khởi tạo bằng Class</div>
);
}
}
ReactJS là một thư viện JavaScript dùng trong việc xây dựng giao diện người dùng và được phát triển bởi đội ngũ Facebook. Tới nay, ReactJS đã thu hút hàng triệu lập trình viên trên thế giới. ReactJS thường được dùng bởi Frontend Developer trong thiết kế Web Application một cách nhanh chóng hơn. Vậy để tìm hiểu ReactJS, chúng ta phải tìm hiểu từ đâu? Và cần gì để chạy được ReactJS? Qua bài viết này, các bạn đọc giả sẽ hiểu được cách cài đặt và sử dụng ReactJS một cách đơn giản nhất.
create-react-app thienanblog
Trong đó thienanblog là tên Folder mà các bạn ấn định nên không cần phải làm theo bài viết. Tuy nhiên với những bạn không rành thì trước mắt cứ làm theo đi đã, để dễ dàng theo dõi bài viết hơn.
Như vậy ở bên trên các bạn cũng đã tìm hiểu qua 1 số lệnh cơ bản của ReactJS rồi, giờ thì chạy thôi nào:
cd thienanblog npm start
Một cửa sổ sẽ hiện lên và các bạn thấy ReactJS đã chạy rồi đấy:
Xong như vậy là chúng ta đã hoàn tất cách cài đặt ReactJS. Chuyển sang tinh chỉnh một số File nào. Bạn hãy vào trong thư mục src và tìm file App.js như hình:
Sau đó tinh chỉnh lại như sau và save lại:
/// ...
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Chào mừng tới React tại Thienanblog</h1>
</header>
<p className="App-intro">
<ThienanBlog />
</p>
</div>
);
}
}
/// ...
Lập tức màn hình Browser sẽ tự động Reload lại mà không cần bạn phải F5. Đó chính là do NodeJS vẫn đang chạy, nên vì thế nó sẽ nhận biết được khi nào các bạn thay đổi nội dung trong file.
Tiếp tục, chúng ta sẽ viết ngay 1 Component đơn giản nhất trong ReactJS bằng cách gõ vào đoạn Code sau:
function ThienanBlog() {
return (
<div>Thienanblog xin chào các bạn độc giả</div>
);
}
Đoạn code trên chắc chắn sẽ có rất nhiều bạn thấy dòng code “quái lạ”… làm thế nào mà có HTML gì đó ở trong đây vậy? Đó chính là JSX đấy các bạn ạ và nó là gì thì từ từ rồi chúng ta sẽ biết, đừng vội nản các bạn nhé. Và nội dung file App.js sẽ như sau:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
function ThienanBlog() {
return (
<div>Thienanblog xin chào các bạn độc giả</div>
);
}
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Chào mừng tới React tại Thienanblog</h1>
</header>
<p className="App-intro">
<ThienanBlog />
</p>
</div>
);
}
}
export default App;
Sau đó, các bạn save lại và xem lại kết quả của chúng ta:
Continue reading Sự khác biệt giữa Arrow Function và Function thông thường
// Cú pháp khởi tạo biến và hằng số let numVar = 1; let stringVar = 'Hello World!!!'; // numVar += 1; ==> numVar === 2 const numConst = 1; const stringConst = 'Hello World!!!'; // numConst += 1; ==> error
// Nội suy chuỗi (String Interpolation)
let stringVar = 'Hello World!!!';
console.log(`Nội suy chuỗi: ${stringVar}`); // ==> "Nội suy chuỗi: Hello World!!!"
function stringInterpolation() {
return 'stringInterpolation đã được gọi!!!';
}
console.log(`Nội suy chuỗi: ${stringInterpolation()}`);
function originalDefaultValues(a, b) {
a = a || 1; // Nếu có giá trị và không rỗng hoặc sai(false) thì set là a, nếu không sẽ là 1
b = b || 2; // Tương tự như trên
}
Và với cú pháp mới, Javascript đã cho phép chúng ta viết dễ dàng hơn hẳn:
// Các giá trị mặc định của các tham số trong Function
function defaultParams(a = 1, b = 2) {
console.log(`Giá trị mặc định: ${a} - ${b}`);
}
defaultParams();
// Function thông thường
function regularFunc() {
this.hello = 'Hello Regular Function';
console.log('regularFunc: ' + this.hello);
}
regularFunc();
// Anonymous Function
let anonymousFunc = function() {
this.hello = 'Hello Anonymous Function';
console.log('anonymousFunc: ' + this.hello);
}
anonymousFunc();
// Arrow Function
let arrowFunc = () => {
// this ở đây sẽ không hiểu nếu bạn dùng 'use strict' ở Javascript hoặc khi dùng Babel
this.hello = 'Hello Arrow Function';
console.log('arrowFunc: ' + this.hello);
}
arrowFunc();
// Một số cách viết tắt trong Arrow Function
let full = (a = 1 , b = 2) => {
return a + b;
}
full(); // full === 3
let one = a => a; one(5); // one === 5
let two = (a, b) => a + b; two(1, 2) // two === 3
See the Pen Tìm hiểu cú pháp ES6 by Ân Vũ (@thienanblog) on CodePen
light
Tác giả: Alen Grakalic
Website: http://i-like-robots.github.io/EasyZoom
Plugin này được tạo ra để giúp chúng ta có thể hiển thị những hình ảnh cỡ lớn giúp người dùng có thể xem rõ hình ảnh hơn. Nhất là ở những Website bán hàng, khi mà người dùng rất cần một hình ảnh chân thật, to và rõ ràng để họ có thể xem sản phẩm một cách tốt nhất trước khi quyết định mua.
Plugin này ra đời để giúp ta làm điều đó bằng cách tải hình ảnh lớn khi chúng ta rê chuột vào hình ảnh nhỏ, tạo cảm giác cho người xem như chúng ta đang dùng chức năng Zoom In (Phóng to) hình ảnh lên vậy.
Để có thể sử dụng Plugin các bạn cần theo các bước sau:
Để sử dụng Plugin này, các bạn cần phải làm chính xác những gì tôi hướng dẫn. Bởi vì, website của tác giả hướng dẫn rất sơ sài. Và chủ yếu nhờ vào cách sử dụng của tác giả và tôi hiểu ra cách sử dụng của nó.
Đầu tiên, các bạn cần chuẩn bị các hình ảnh ở những bước trước chúng ta đã làm, sau đó hãy tạo ra một file và bạn có thể tùy nghi đặt tên, ở đây tôi sẽ đặt là overlay.html và có cấu trúc như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>EasyZoom - Thienanblog.com</title>
<link rel="stylesheet" type="text/css" href="css/easyzoom.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/easyzoom.js"></script>
<style type="text/css">
.wrap {
width: 940px;
margin: 0px auto;
padding: 5px 15px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="easyzoom easyzoom--overlay ten-class-tu-dat">
<a href="img/2_zoom.jpg">
<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
<img src="img/2_standard.jpg" alt="" width="500" height="400">
</a>
</div>
</div>
<script type="text/javascript">
// Instantiate EasyZoom instances
var $easyzoom = $('.ten-class-tu-dat').easyZoom();
</script>
</body>
</html>
Khi chạy ví dụ trên các bạn sẽ thấy như sau:
Vậy do đâu Plugin này có thể chạy được, các bạn hãy chú ý các điểm sau:
<a href="img/2_zoom.jpg"> <!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML --> <img src="img/2_standard.jpg" alt="" width="500" height="400"> </a>
<script type="text/javascript">
// Instantiate EasyZoom instances
var $easyzoom = $('.ten-class-tu-dat').easyZoom();
</script>
Các bạn có thể chuẩn bị cấu trúc HTML như sau và lưu tên file là ajacent.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>EasyZoom - Thienanblog.com</title>
<link rel="stylesheet" type="text/css" href="css/easyzoom.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/easyzoom.js"></script>
<style type="text/css">
.wrap {
width: 940px;
margin: 0px auto;
padding: 5px 15px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="easyzoom easyzoom--adjacent ten-class-tu-dat">
<a href="img/2_zoom.jpg">
<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
<img src="img/2_standard.jpg" alt="" width="500" height="400">
</a>
</div>
</div>
<script type="text/javascript">
// Instantiate EasyZoom instances
var $easyzoom = $('.ten-class-tu-dat').easyZoom();
</script>
</body>
</html>
Khi chạy ví dụ trên các bạn sẽ thấy như sau:
Tính năng này giúp chúng ta khi rê chuột vô hình ảnh, thì đồng thời Plugin sẽ tạo ra một hình ảnh nữa nằm bên phải và có chiều dài và cao bằng với hình ảnh được rê chuột. Tính năng này các bạn thường thấy ở các Website bán hàng như Ebay.
Và trong ví dụ này, cách sử dụng cũng giống ở ví dụ trước ở tính năng “Overlay” chỉ khác duy nhất chính là tên class mà các bạn sử dụng là <div class=”easyzoom easyzoom–adjacent ten-class-tu-dat”> và trong đó class easyzoom—adjacent đại diện cho tính năng “Ajacent”.
Tính năng này là sự kết hợp giữa thư viện hình ảnh (Gallery) nhờ vào các hình ảnh thu nhỏ kết hợp với tính năng “Overlay” để phóng to hình ảnh được chọn và rê chuột vào.
Các bạn cần chuẩn bị cấu trúc file thumbnail-overlay.html như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>EasyZoom - Thienanblog.com</title>
<link rel="stylesheet" type="text/css" href="css/easyzoom.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/easyzoom.js"></script>
<style type="text/css">
.wrap {
width: 940px;
margin: 0px auto;
padding: 5px 15px;
}
ul {
list-style: none;
}
ul li {
float:left;
margin: 5px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails ten-class-tu-dat">
<a href="img/3_zoom_1.jpg">
<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
<img src="img/3_standard_1.jpg" alt="" width="640" height="360">
</a>
</div>
<ul class="thumbnails">
<li>
<a href="img/3_zoom_1.jpg" data-standard="img/3_standard_1.jpg">
<img src="img/3_thumbnail_1.jpg" alt="">
</a>
</li>
<li>
<a href="img/3_zoom_2.jpg" data-standard="img/3_standard_2.jpg">
<img src="img/3_thumbnail_2.jpg" alt="">
</a>
</li>
<li>
<a href="img/3_zoom_3.jpg" data-standard="img/3_standard_3.jpg">
<img src="img/3_thumbnail_3.jpg" alt="">
</a>
</li>
<li>
<a href="img/3_zoom_4.jpg" data-standard="img/3_standard_4.jpg">
<img src="img/3_thumbnail_4.jpg" alt="">
</a>
</li>
</ul>
</div>
<script type="text/javascript">
// Instantiate EasyZoom instances
var $easyzoom = $('.ten-class-tu-dat').easyZoom();
var api = $easyzoom.data('easyZoom');
$('ul').on('click', 'a', function(event) {
event.preventDefault();
api.swap($(this).data('standard'), $(this).attr('href'));
});
</script>
</body>
</html>
Khi chạy ví dụ trên chúng ta sẽ được như sau:
Rất đẹp mắt đúng không nào, chỉ khác ở các ví dụ một tí đó chính là chúng ta cần đến thẻ <ul> để hiển thị các hình ảnh nhỏ bên dưới để người dùng có thể chọn nó. Và đây chính là cấu trúc chung khi các bạn sử dụng Plugin này:
<ul class="thumbnails"> <li> <a href="img/3_zoom_1.jpg" data-standard="img/3_standard_1.jpg"> <img src="img/3_thumbnail_1.jpg" alt=""> </a> </li> <li> <a href="img/3_zoom_2.jpg" data-standard="img/3_standard_2.jpg"> <img src="img/3_thumbnail_2.jpg" alt=""> </a> </li> <li> <a href="img/3_zoom_3.jpg" data-standard="img/3_standard_3.jpg"> <img src="img/3_thumbnail_3.jpg" alt=""> </a> </li> <li> <a href="img/3_zoom_4.jpg" data-standard="img/3_standard_4.jpg"> <img src="img/3_thumbnail_4.jpg" alt=""> </a> </li> </ul>
Trong đó, <a href=”img/3_zoom_1.jpg” data-standard=”img/3_standard_1.jpg”> có thuộc tính href chính là đường dẫn đến hình ảnh phóng lớn và data-standard là hình ảnh thu nhỏ ở phía dưới hình chính của chúng ta.
Và các bạn lại cần phải chú ý một điểm vẫn giống các ví dụ trước đó chính là thẻ <div class=”easyzoom easyzoom–overlay easyzoom–with-thumbnails ten-class-tu-dat”> đã có thêm 1 class mới chính là easyzoom–with-thumbnails để giúp nó hiểu đây chính là thư viện hình ảnh.
Tuy nhiên, khác biệt lớn nhất chính là đoạn mã Javascript:
<script type="text/javascript">
// Instantiate EasyZoom instances
var $easyzoom = $('.ten-class-tu-dat').easyZoom();
var api = $easyzoom.data('easyZoom');
$('ul').on('click', 'a', function(event) {
event.preventDefault();
api.swap($(this).data('standard'), $(this).attr('href'));
});
</script>
Trong đó, $easyzoom.data(‘easyZoom’) sẽ trả về cho chúng ta một Object chứa các phương thức để chúng ta có thể cấu hình Plugin này. Và mỗi khi sự kiện click lên tấm hình ở thư viện thì nó sẽ bị đoạn mã ngăn chặn không cho refresh lại trang thông qua phương thức event.preventDefault() . Và ở cách dùng api.swap() thì các bạn có thể hiểu đơn giản tiếng anh nó đã có nghĩa là “hoán đổi”, và hoán đổi cái gì? Chính là đường dẫn hình ảnh trong data-standard mà chúng ta truyền vào href trong thẻ <a> của chúng ta. Giúp cho Plugin hiểu là hình ảnh mới đã được cấu hình các hình ảnh nhỏ và hình ảnh phóng to.
Và có một điều thú vị là khi các bạn thay đổi easyzoom easyzoom—overlay trong thẻ <div class=”easyzoom easyzoom–overlay easyzoom–with-thumbnails ten-class-tu-dat”> các bạn sẽ lại có được luôn cả tính năng “Ajacent” mà chúng ta đã được thử qua trước đó.
| Tên tính năng | Class được sử dụng |
| Overlay | easyzoom easyzoom–overlay |
| Ajacent | easyzoom easyzoom–ajacent |
| Thumbnail – Overlay | easyzoom easyzoom–overlay easyzoom–with-thumbnails |
| Thumbnail – Ajacent | easyzoom easyzoom–ajacent easyzoom–with-thumbnails |
Qua bài viết này, các bạn đã có thể sử dụng được các tính năng cơ bản nhất của Plugin rồi, ngoài ra các bạn cũng nên tham khảo thêm trong tài liệu của tác giả để có thể hiểu về Plugin này hơn nếu như có nhu cầu chuyên sâu và cao cấp hơn.
Các bạn có thể tải toàn bộ Source tại đây
Xin cám ơn các độc giả đã đón xem bài viết này.
Ajax không phải là ngôn ngữ mà là kĩ thuật trong Javascript, giúp chúng ta tạo ra các ứng dụng Web Không đồng bộ (Asynchronous). Nói dễ hiểu hơn là kĩ thuật “load dữ liệu không cần load lại trang” hay “load một phần website”, giúp website linh hoạt, nhanh chóng và thân thiện với người dùng hơn.
Để sử dụng kĩ thuật Ajax trong jQuery, trước hết các bạn cần chuẩn bị cho tôi đó chính là thư viện jQuery được tải về từ http://jquery.com/download . Trong đó, jQuery sẽ có 2 phiên bản là 1.x và 2.x thì chúng ta có thể chọn lựa bản nào cũng được. Hai bản chỉ khác nhau ở việc hỗ trợ các trình duyệt cũ và mới mà thôi, cụ thể ở đây chính là IE 8 trở về trước. Ở đây tôi sẽ dùng bản jQuery 1.x để dễ dàng cho việc các bạn độc giả thử nghiệm hơn.
Lưu ý: Các bạn cũng cần phải có ít nhất 1 Web Server như (XAMPP, WampServer,…) hoặc có thể sử dụng mini Webserver Mongoose cho HTML tại đây mongoose-free-5.3.5 và có thể đọc hướng dẫn sau để sử dụng https://cesanta.com/docs/FileSharing.shtml
Sau đây, tôi sẽ giới thiệu cho các bạn các phương thức Ajax thông dụng mà jQuery đã viết sẵn:
Dùng trong các trường hợp cần load dữ liệu đơn giản và không cần thiết phải can thiệp vào dữ liệu trả về.
Chuẩn bị HTML như sau trong cặp thẻ “<body> ”:
<div> <a href="#" id="load-du-lieu">Load dữ liệu</a> </div> <div id="noidung"></div>
Và trong cặp thẻ “<script> ”:
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
console.log($('#noidung').load('vidu1.html'));
});
});
Và như các bạn thấy trong đoạn code ở cặp thẻ “<script> ”, các bạn thấy được tôi có sử dụng một file HTML khác là “vidu1.html” để chúng ta sẽ load dữ liệu từ nó vào. Các bạn sẽ được cấu trúc đầy đủ và lưu tên file là “index.html” (Tên “index” các bạn có thể tự đặt) như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hướng dẫn jQuery Ajax - Thienanblog.com</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<a href="#" id="load-du-lieu">Load dữ liệu</a>
</div>
<div id="noidung">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$('#noidung').load('vidu1.html');
});
});
</script>
</body>
</html>
Cấu trúc file “vidu1.html” sẽ như sau:
<p>Đây là vidu1.html</p> <p id="chuoi-can-lay">Chuỗi cần lấy tiếp theo</p>
Chúng ta sẽ có cấu trúc thư mục tổng thể như sau trong ví dụ này:
Và trong cặp thẻ “<script>” tôi sẽ nhắc lại một số cú pháp tôi đã xài để bạn nào quên hoặc chưa biết thì có thể tìm hiểu lại:
Và bây giờ, chúng ta hãy thử chạy Ví dụ trên xem thế nào nhé:
Bước 1: Load file “index.html” mà chúng ta đã xây dựng bên trên:
Bước 2: Nhấn vào nút “Load dữ liệu” và chạy thử:
Như vậy, sau 2 bước trên chúng ta đã load thành công dữ liệu từ “vidu1.html” rồi đấy. Và một câu hỏi đặt ra, đó chính là có cách nào mà chúng ta có thể chỉ lấy chuỗi mà chúng ta cần sau khi load dữ liệu vào hay không? Các bạn hãy xem lại cấu trúc “vidu1.html” nhé:
<p>Đây là vidu1.html</p> <p id="chuoi-can-lay">Chuỗi cần lấy tiếp theo</p>
Các bạn thấy gì trong ví dụ này? Có phải chúng ta có 2 thẻ “<p> ” ngăn cách mỗi chuỗi đúng không nào. Và nếu trong trường hợp này, tôi muốn lấy ra thẻ “<p> ” có “id ” là “chuoi-can-lay ”. Thì tôi sẽ chỉnh sửa lại một tí đoạn code trong “<script> ” của chúng ta như sau:
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$('#noidung').load('vidu1.html #chuoi-can-lay');
});
});
Và sau đó các bạn chạy và load lại dữ liệu thì chúng ta sẽ được như sau:
Thật bất ngờ đúng không nào? Như vậy, để có thể bóc tách dữ liệu từ file mà chúng ta load lên, và ở đây chính là file “vidu1.html” thì chúng ta cần đặt “id ” cho thẻ bao lấy dữ liệu mà chúng ta cần tách lọc. Sau đó thêm vào ĐẰNG SAU đường dẫn như cách chúng ta dùng jQuery để trỏ đến một thẻ trong HTML nào đó vậy.
Vậy là chúng ta đã hoàn tất tìm hiểu xong được phương thức “load() ” trong jQuery Ajax rồi đấy.
Ở 2 phương thức này thì trong đó phương thức “get() ” giống “load() ” về mặt kĩ thuật đó chính là dùng “method” là “GET” trong “<form> ”. Tương tự “post() ” sẽ tượng trưng cho “method” là “POST” của “<form> ”. Cả 2 phương thức này đều cách viết tắt của phương thức “ajax()” mà chúng ta sẽ làm quen ở phần tới.
Vì có sự tương đồng giữa “get() ” và “load() ” nên chắc hẳn cách dùng cũng không có phần khác lạ so với các ví dụ ở trên, nhưng cần lưu ý một số cú pháp để tránh nhầm lẫn với “load() ”:
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$.get('vidu1.html', function(ketqua) {
$('#noidung').html(ketqua);
$('#noidung').html($('#chuoi-can-lay').html());
});
});
});
Kết quả khi chạy ví dụ trên:
Ngoài ra “get() ” còn hỗ trợ bạn truyền dữ liệu sang file lấy dữ liệu, tuy nhiên cái này thuộc về sự hiểu biết của các bạn trong kĩ thuật lập trình Web nên tôi không nói nhiều ở đây, không thì sẽ loãng bài viết.
Trong phương thức này, cần có ít nhất một ngôn ngữ động ở phía hệ thống để nhận lấy dữ liệu từ phương thức “post() ” truyền qua. Vì thế, ở đây tôi sẽ dùng PHP để demo cho các bạn.
Cách dùng của phương thức “post() ” sẽ giống với “get() ” nhưng khác về kĩ thuật truyền dữ liệu mà thôi.
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$.post('vidu2.php', {
emNguoiYeu: "Em Yêu Anh",
anhNguoiYeu: "Anh không phải người dễ dãi nhé"
},function(ketqua) {
$('#noidung').html(ketqua);
});
});
});
Nội dung của file “vidu2.php“:
<?php echo '<pre>' .print_r($_POST,true). '</pre>';
Kết quả ví dụ trên sau khi thực thi:
Ở ví dụ phương thức “post() ” này, ở đối số thứ 2 thay vì là Anonymous Function như ở ví dụ “get() ” mà chúng ta đã xem trước đó, thì đây là “một đối tượng” (Object) chứa những dữ liệu mà chúng ta cần truyền qua đường dẫn “vidu2.php” để nhận và trả về dữ liệu. Kết quả trả về sẽ được đưa vào đối số thứ 3 cho chúng ta.
Như vậy chúng ta đã hoàn tất tìm hiểu xong “get() ” và “post() ” rồi. Quá dễ đúng không nào? Đến với phần tiếp theo chúng ta sẽ tìm hiểu đến phương thức “ajax() ” mạnh nhất trong thư viện jQuery. Nên đòi hỏi cách dùng nó cũng tương đối khó khăn hơn nhưng vẫn dễ rất nhiều hơn so Javascript thuần.
Cách sử dụng phương thức nãy vẫn giống cách gọi của các phương thức “get() ” và “post() ” nhưng chúng ta thay vì truyền đường dẫn trực tiếp vào phương thức thì phương thức “ajax() ” lại chấp nhận đối số đầu tiên chính là cấu hình cho kĩ thuật Ajax của chúng ta:
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$.ajax({
url: 'vidu2.php',
type: 'POST',
dataType: 'html',
data: {
emNguoiYeu: "Em Yêu Anh",
anhNguoiYeu: "Anh không phải người dễ dãi nhé"
}
}).done(function(ketqua) {
$('#noidung').html(ketqua);
});
});
});
Các bạn thấy chứ? Rõ ràng đối số đầu tiên chúng ta truyền vào cho phương thức “ajax() ” chính là một đối tượng (Object) gồm các thuộc tính cấu hình để kĩ thuật AJAX của chúng ta có thể thực thi. Trong đó:
Kết quả thực thi ví dụ trên:
Hoàn toàn không khác ví dụ trước ở phương thức “post() ” đúng không nào? Và không chỉ có nhiêu đó, phương thức “ajax() ” còn hỗ trợ hàng tá các chức năng khác nhưng tôi không thể giới thiệu hết cho các bạn trong nội dung bài viết này được. Các bạn có thể xem thêm về tài liệu hướng dẫn của phương thức trên tại: http://api.jquery.com/category/ajax
Các bạn có thể tải toàn bộ Sources Code của các ví dụ trên tại đây.
Trân trọng cám ơn độc giả đã xem qua bài viết này, mong được sự ủng hộ của các bạn ở các bài viết tới.