Hướng dẫn ajax php mysql - ajax php mysql

• Trang chủ
• Phát triển web
• Javascript
• Ví dụ về PHP & MySQL AJAX Sử dụng jQuery

Bài viết sẽ hướng dẫn các bạn cách sử dụng jQuery trong PHP & MySQL AJAX từng bước chi tiết thông quá ví dụ cụ thể.

Tại sao chúng ta cần sử dụng AJAX?AJAX có thể giúp chúng ta giao tiếp với máy chủ từ giao diện người dùng mà không cần tải lại trang của chúng ta và giúp giảm chi phí băng thông máy chủ và cải thiện trải nghiệm người dùng.
AJAX có thể giúp chúng ta giao tiếp với máy chủ từ giao diện người dùng mà không cần tải lại trang của chúng ta và giúp giảm chi phí băng thông máy chủ và cải thiện trải nghiệm người dùng.

Một số trang web lớn như Google, Youtube, Facebook và nhiều trang web khác đều sử dụng kỹ thuật này, vì vậy nếu bạn là một nhà phát triển web thì bạn nên học AJAX.Trong hướng dẫn này, chúng tôi sẽ triển khai ví dụ PHP & MySQL AJAX bằng cách sử dụng Thư viện JQuery với các bản ghi Lưu & hiển thị danh sách nhân viên đơn giản để chúng ta kiểm tra phương pháp POST & GET AJAX.
Trong hướng dẫn này, chúng tôi sẽ triển khai ví dụ PHP & MySQL AJAX bằng cách sử dụng Thư viện JQuery với các bản ghi Lưu & hiển thị danh sách nhân viên đơn giản để chúng ta kiểm tra phương pháp POST & GET AJAX.

Bảng cơ sở dữ liệu

Trong hướng dẫn này chúng ta sẽ sử dụng bảng CSDL như bài Kết hợp jQuery Datatables Ajax PHP và MySQL [PDO] để lưu và hiển thị danh sách nhân viên.

Tập tin index.html

Tập tin có chứa các mã HTML và JS các bạn có thể đọc kỹ để hiểu các câu lệnh qua các chú thích.

Ví dụ

  	Ví dụ về PHP & MySQL AJAX Sử dụng jQuery

  	
	
  	
  	
  	
		.list-email {
			font-style: italic;
		}

		.list-address {
			margin-top: -14px;
		    margin-bottom: 0px;
		    font-size: 12px;
		}  		
  	

  

   
	


		



	    
Ví dụ về PHP & MySQL AJAX Sử dụng jQuery

	    


	    
	    

	    	

	    		
Thêm nhân viên mới

			    
			    	

					    Email
					    
				  	
				  	

					    Họ và tên
					    
				  	
				  	

					    Lương
					    
				  	
				  	

					    Địa chỉ
					    
				  	
				  	Gửi
				
	    	

	    	

	    		
Danh sách nhân viên
	    		

	    	
	    
	

	
	
	
	
	
	
	
	
	
	
function all[] 
{
	// Cài đặt Ajax
	$.ajax[{
        type: "GET", //Phương thức nhận dữ liệu từ máy chủ
        url: 'all.php', // địa chỉ nhận dữ liệu
        success: function [response] {//dữ liệu được trả về tại đây
            
            // Phân giải kết quả Json
        	response = JSON.parse[response];

            var html = "";
            // Kiểm tra xem có kết quả hay không
            if[response.length] {
            	html += '
';
	            // Tạo vòng lặp kết quả JSON
	            $.each[response, function[key,value] {
	            	// Danh sách nhân viên
					html += '';
					html += "
" + value.name +' ['+ value.salary + "] [" + value.email + "]" + "

  

";
					html += "
" + value.address + "
";
					html += '';
	            }];
	            html += '
';
            } else {
            	html += '
';
				  html += 'Không có dữ liệu!';
				html += '
';
            }

            

            // Hiển thị danh sách nhân viên
			$["#employees-list"].html[html];
        }
    }];
}

function submitForm[] 
{
	$["#btnSubmit"].on["click", function[] {
		var $this 		    = $["#btnSubmit"]; 
        var $caption        = $this.html[];
        var form 			= "#form"; 
        var formData        = $[form].serializeArray[];
        var route 			= $[form].attr['action']; 

        // Ajax config
    	$.ajax[{
	        type: "POST", 
	        url: route, 
	        data: formData, 
	        beforeSend: function [] {
	            $this.attr['disabled', true].html["Processing..."];
	        },
	        success: function [response] {
	            $this.attr['disabled', false].html[$caption];

	            // làm mới danh sách nhân viên
	            all[];

	            // Hiển thị danh sách nhân viên
	            alert[response];

	            // Làm mới biểu mẫu nhập dữ liệu
	            resetForm[];
	        },
	        error: function [XMLHttpRequest, textStatus, errorThrown] {
	        	// Thông báo lỗi
	        }
	    }];
	}];
}

function resetForm[] 
{
	$['#form'][0].reset[];
}


$[document].ready[function[] {

	// Lấy danh sách nhân viên
	all[];

	// Sử dụng AJAX để gửi biểu mẫu
	submitForm[];
	 
}];		
	


  

Ý nghĩa của các hàm trong mã JS

• all[] - lấy tất cả hồ sơ nhân viên qua AJAX- lấy tất cả hồ sơ nhân viên qua AJAX
• submitForm[] - sử dụng để lưu trữ hồ sơ nhân viên qua AJAX - sử dụng để lưu trữ hồ sơ nhân viên qua AJAX
• resetForm[] - sử dụng để đặt lại biểu mẫu sau khi tạo thành công nhân viên - sử dụng để đặt lại biểu mẫu sau khi tạo thành công nhân viên

Tập tin all.php

Tập tin hiển thị danh sách nhân viên từ CSDL.

Ví dụ

Ý nghĩa của các hàm trong mã JS

all[] - lấy tất cả hồ sơ nhân viên qua AJAX

Ví dụ