/ / Javascript & Jquery / Comment (1)

jQuery ajax toàn tập

AJAX viết tắt từ Asynchronous JavaScript and XML (JavaScript XML không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web.Trong jQuery cung cấp cho chúng ta những phương thức để thực thi kỹ thuật ajax hết sức đơn giản và dễ dàng.Chúng ta hãy cùng đi tìm hiểu chi tiết từng phương thức trong jQuery ajax nhé.

Phương thức load() trong jQuery

– Hàm load() trong jquery là 1 hàm đơn giản nhất để thực thi kỹ thuật ajax,chức năng của hàm này là hiển thị các dữ liệu được tải xuống vào 1 phần tử html nào đó
Cú pháp:

load(url, params, callback)
  1. Url: là địa chỉ của trang xử lý dữ liệu
  2. Params: là một đối tượng lưu giữ các biến gửi lên server
  3. Callback: là hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành

Ví dụ 1:

$(document).ready(function(  ){
        $("div#result").load("data.html");
});

trong ví dụ trên chúng ta thực hiện lấy toàn bộ nội dung trả về trong file data.html và hiển thị dữ liệu đó vào thẻ div#result
Ví dụ 2:

$(document).ready(function(  ){
    $("div#result").load("data.php", {id: 1}, callback);
});
function callback(){
    alert("Tải dữ liệu thành công.");
}

Ta xâ dựng file data.php với nội dung sau:

    	if(isset($_POST['id']))
    	{
    		echo 'Bạn đã gửi dữ liệu ID = '.$_POST['id'].' thành công';
    	}else{
    		echo 'Không có dữ liệu được gửi sang';
    	}

trong ví dụ trên chúng ta thực hiện gửi dữ liệu (id = 1) sang file data.php và hiển thị dữ liệu trả về từ file này vào thẻ div#result,sau khi tải dữ liệu thành công sẽ gọi tới hàm callback.

Phương thức get() trong jQuery

– 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 server theo phương thức GET.
Cú pháp:

get(url, params, callback)
  1. Url: là địa chỉ của trang xử lý dữ liệu
  2. Params: là một đối tượng lưu giữ các biến gửi lên server
  3. Callback: là hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành

Ví dụ:

$(document).ready(function(  ){
      $.get("data.php", {id: 1},
       function(data){
         $("div#result").html(data);
       }); 
});

Ta xâ dựng file data.php với nội dung sau:

    	if(isset($_GET['id']))
    	{
    		echo 'Bạn đã gửi dữ liệu ID = '.$_GET['id'].' thành công';
    	}else{
    		echo 'Không có dữ liệu được gửi sang';
    	}

trong ví dụ trên chúng ta thực hiện gửi dữ liệu (id = 1) sang file data.php theo phương thức GET và hiển thị dữ liệu trả về từ file này vào thẻ div#result

Phương thức post() trong jQuery

– 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 server theo phương thức POST.
Cú pháp:

post(url, params, callback)
  1. Url: là địa chỉ của trang xử lý dữ liệu
  2. Params: là một đối tượng lưu giữ các biến gửi lên server
  3. Callback: là hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành

Ví dụ:

$(document).ready(function(  ){
      $.post("data.php", {id: 1},
       function(data){
         $("div#result").html(data);
       }); 
});

Ta xâ dựng file data.php với nội dung sau:

    	if(isset($_POST['id']))
    	{
    		echo 'Bạn đã gửi dữ liệu ID = '.$_POST['id'].' thành công';
    	}else{
    		echo 'Không có dữ liệu được gửi sang';
    	}

trong ví dụ trên chúng ta thực hiện gửi dữ liệu (id = 1) sang file data.php theo phương thức POST và hiển thị dữ liệu trả về từ file này vào thẻ div#result

Phương thức ajax() trong jQuery

– Ngoài các hàm trên mà chúng ta thường hay dùng, jQuery còn cung cấp thêm cho ta một hàm ajax() tổng quát. Với hàm này, ta có thể tùy chỉnh cấu hình, thêm bớt các thông số chứ không bị bó hẹp như hai hàm trên.Chỉ cần sử dụng 1 hàm này có thể đáp ứng các yêu cầu về thực thi ajax. Để sử dụng hàm ajax này, ta làm theo cấu trúc mẫu như sau:

    	$.ajax({
    		type: 'POST',
    		url: 'data.php',
    		data: {
    			id: "1",
    			email: "hocphp@gmail.com"
    		},
    		dataType: 'html',
    		success: function(data) {
    			// code here
    		},
    		error: function() {
    			// code here
    		}
    	});
  1. type: Kiểu gửi dữ liệu,có thể là POST hoặc GET ,nó giống với thuộc tính method trong form
  2. url: Đường dẫn xử lý dữ liệu,nó tương tự như thuộc tính action trong form
  3. data: Tập hợp các biến dữ liệu gửi lên server
  4. dataType: Kiểu dữ liệu có thể html,text,json,xml
  5. success: Hàm chạy khi nhận dữ liệu thành công
  6. error: Hàm chạy khi có lỗi xảy ra

Ví dụ 1: dữ liệu trả về dạng html

    	$.ajax({
    		type: 'POST',
    		url: 'data.php',
    		data: {
    			id: "1",
    		},
    		dataType: 'html',
    		success: function(data) {
    			$("div#result").html(data);
    		},
    		error: function() {
    			alert('Có lỗi trong quá trình xử lý');
    		}
    	});

Ta xâ dựng file data.php với nội dung sau:

    	if(isset($_POST['id']))
    	{
    		echo 'Bạn đã gửi dữ liệu ID = '.$_POST['id'].' thành công';
    	}else{
    		echo 'Không có dữ liệu được gửi sang';
    	}

Ví dụ 2: dữ liệu trả về dạng json

    	$.ajax({
    		type: 'POST',
    		url: 'data.php',
    		data: {
    			id: "1",
    		},
    		dataType: 'json',
    		success: function(data) {
    			if(data.complate == '1')
    			{
    				alert('Có dữ liệu gửi sang');
    			}else{
    				alert('Không có dữ liệu gửi sang');
    			}
    		},
    		error: function() {
    			alert('Có lỗi trong quá trình xử lý');
    		}
    	});

Ta xâ dựng file data.php với nội dung sau:

    	$data = array();
    	if(isset($_POST['id']))
    	{
    		$data['complate'] = '1';
    	}else{
    		$data['complate'] = '0';
    	}
    	echo json_decode($data);

– Tổng kết: qua bài này các bạn đã có những khái niệm cơ bản cũng như các cách sử dụng kỹ thuật jQuery ajax rồi phải không nào,chúc các bạn sẽ áp dụng nó tốt nhất trong các dự án của mình.



06/05/2015
Tags:
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

One comment

  1. Hoang says:
     /  Reply

    Cái json sao mình làm không được ad ơi, nó cứ báo có lỗi xảy ra? mình copy nguyên xi

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL