Ở đây, chúng ta sẽ bắt đầu gửi biểu mẫu mà không cần làm mới trang bằng cách sử dụng Ajax jQuery và Php với ví dụ. Ngoài ra, hãy giải thích và cung cấp một số mã cho ví dụ dữ liệu biểu mẫu tuần tự hóa ajax mà không cần tải lại trang. Đồng thời, gửi biểu mẫu và hiển thị kết quả trên cùng một trang mà không cần làm mới

Do đó, hiển thị phương pháp tốt nhất để sử dụng mã này cho mọi biểu mẫu và gửi dữ liệu mà không cần làm mới trang với kết quả ví dụ hiển thị cùng một trang ngay lập tức bằng ajax bằng cách sử dụng jquery và PHP

hãy xem các ví dụ trong phần bên dưới từng bước và cũng giải thích tất cả các điểm chính khác tìm thấy và tìm hiểu tại đây

Mục lục

• Gửi biểu mẫu mà không cần làm mới trang bằng Ajax jQuery và PHP
  • Chèn dữ liệu vào PHP bằng jQuery ajax mà không cần làm mới trang
    • jQuery nhận giá trị từ dữ liệu tuần tự hóa
• Gửi biểu mẫu và hiển thị kết quả trên cùng một trang mà không cần làm mới
• Phần kết luận

Gửi biểu mẫu mà không cần làm mới trang bằng Ajax jQuery và PHP

Đầu tiên, chúng ta phải tạo cấu trúc biểu mẫu HTML để triển khai gửi dữ liệu biểu mẫu trong cơ sở dữ liệu mà không cần tải lại trang bằng jQuery

Bước 1. - Đã tạo chỉ mục trang. php và thêm biểu mẫu HTML này

	
	


This is the simple form using Ajax

	

	Name
	
	
	

	Mobile No
	
	
	

	address
	
	
	

	city
	
	
	Submit

Bước 2. Thứ hai, chúng tôi đã tạo một trang để tải lên. dữ liệu bảng php sử dụng ajax xem bên dưới. Ở đây có sẵn code rồi copy code này dán vào file upload của bạn hết code

query($sql) === TRUE) {
  echo "Insert your form record successfully";
} 
?>

Bây giờ, tôi mô tả mã này. Sau đó, bạn đã tạo hai tệp trên dự án của mình, tệp đầu tiên hiển thị biểu mẫu và một tệp phụ trợ quy trình khác để tải dữ liệu biểu mẫu lên

Ở trên, chúng tôi chia sẻ một ví dụ đầy đủ với mã mà bạn có thể áp dụng ở bất kỳ đâu và sửa đổi dữ liệu của mình trong khi gửi biểu mẫu bằng trang tải lại. Thông thường, trong mã này có sẵn một số sự kiện để lấy dữ liệu trong tài liệu này

Vì vậy, ở đây bạn có thể thấy đầu ra của ví dụ biểu mẫu ajax gửi biểu mẫu mà không cần tải lại trang

Ngoài ra, chúng tôi đã cung cấp các cách khác để sử dụng ví dụ gửi biểu mẫu jquery ajax trong phần bên dưới. Vì vậy, tôi đang sử dụng một biểu mẫu để gửi các ví dụ dữ liệu mà không cần làm mới trang, đây là ví dụ cơ bản tốt nhất

Chèn dữ liệu vào PHP bằng jQuery ajax mà không cần làm mới trang

Tương tự, như trên hiển thị một biểu mẫu và triển khai mã jquery và chuyển dữ liệu sang một trang khác mà không cần tải trang. Sau đó, có thể thêm truy vấn chèn dữ liệu vào mã PHP với sự trợ giúp của ajax. Vì vậy, sau đó, hiển thị mã ở đây

$conn = new mysqli('localhost', 'username', 'password', 'databasename');

// Insert data Query
$sql = "INSERT INTO formdata ( name, mobile, address, city )
VALUES ( '".$_POST['name']."' , '".$_POST['mobile']."', '".$_POST['address']."', '".$_POST['city']."')";

if ($conn->query($sql) === TRUE) {
  echo "Insert your form record successfully";
} 

Sau đó, mã PHP để chèn dữ liệu bằng ajax với truy vấn SQL. Bây giờ chúng ta phải đưa ra một ví dụ khác về biểu mẫu jquery ajax gửi ví dụ PHP. Ngoài ra, hãy tìm hiểu thêm về ajax

jQuery nhận giá trị từ dữ liệu tuần tự hóa

Ở đây, lấy tất cả giá trị biểu mẫu chỉ sử dụng một hàm serialize(). Theo đó, họ truy cập tất cả giá trị đầu vào từ biểu mẫu bằng phương thức post. Ví dụ: bạn đề cập đến một id trên biểu mẫu, hãy xem cái này

	

	Name
	
	
	

	Mobile No
	
	
	

	address
	
	
	

	city
	
	
	Submit

Sau đó ta khai báo 1 tên id chẳng hạn trên main form. Sau đó, thêm id này với chức năng tuần tự hóa bằng ajax

$.ajax({
			    type: "POST",
			    url: "upload.php",
			    data: $("#form-search").serialize();		    
			    dataType: "json",
			    success: function(result){
			        
			    }
			});

Do đó, lấy giá trị đầu vào của biểu mẫu bằng phương thức đăng đến bất kỳ đâu bạn muốn xác định đường dẫn trang trong URL. Bên dưới, đã thêm $_POST[‘name’] cũng như nhận tất cả giá trị bằng cách sử dụng PHP và chèn dữ liệu với sự trợ giúp của mã này

Bây giờ, một điều nữa về thời điểm bạn chèn dữ liệu. Vì vậy, có thể thêm bất kỳ phản hồi nào vào kết quả

Gửi biểu mẫu và hiển thị kết quả trên cùng một trang mà không cần làm mới

Thông thường, trong phương pháp này, bạn phải nhận được kết quả trên cùng một trang mà không cần tải lại trang xem mã này

$.ajax({
			    type: "POST",
			    url: "upload.php",
			    data: $("#form-search").serialize();		    
			    dataType: "json",
			    success: function(result){
			        $('#taable').html(result);
			    }
			});

Vì vậy, nơi bạn muốn hiển thị kết quả, sau đó cung cấp id và dán phản hồi bằng mã này

Phần kết luận

Cuối cùng, nếu bạn có bất kỳ câu hỏi và đề xuất nào liên quan đến việc hỏi chúng tôi. Do đó, chúng tôi có thể cung cấp các phương pháp gửi biểu mẫu tốt nhất khác mà không cần làm mới trang bằng cách sử dụng ajax jquery và PHP

Ngoài ra, đưa ra một số ví dụ với sự trợ giúp của mã và mô tả mã. Ngoài ra, bạn có thể tìm hiểu chủ đề tương đối với ví dụ kiểm tra nó JavaScript Thay đổi hình ảnh Sự kiện onclick

Làm cách nào để thay đổi nội dung của div mà không cần tải lại trang web?