Home » Lập trình » Kiến thức căn bản » Hướng dẫn lấy dữ liệu từ nhiều checkbox bằng Ajax /jQUery và PHP
Hướng dẫn lấy dữ liệu từ nhiều checkbox bằng Ajax /jQUery và PHP5283 lượt đọc
Ở bài hướng dẫn này , mình sẽ hướng dẫn các bạn cách lấy dữ liệu từ nhiều checkbox bằng ajax kết hợp với PHP. Nói thêm về Ajax, nó là một công nghệ được google sáng tạo ra dựa trên php và jQuery, là công nghệ lấy dữ liệu từ máy chủ mà không cần load lại trang web, cho phép chúng ta load cái mới mà không cần tải lại cái cũ sẽ đỡ mất thời gian hơn nên duyệt web sẽ nhanh hơn.
– Bước 1: Các cần phải tải thư viện jQuey.min.js , hoặc link trực tiếp như mình.
– Bước 2: Tạo một file index.php trong localhost với nội dung như sau:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.min.js"></script> <script> jQuery(document).ready(function( ){ jQuery("input[name='checkbox[]']").click(function(){ var stringV = ''; // su dung vong lap de them gia tri checkbox vao chuoi.... jQuery("input[name='checkbox[]']:checked").each(function(){ stringV = stringV + ',' + jQuery(this).val();}); if(stringV.length>1){ stringV = stringV.substring(1); } //ket thuc lap-----------> su dung ajax gui den server. //alert(stringV); jQuery.ajax({ url:"xuly.php", type:"post", data:"id="+ stringV, async: true, success: function(result){ jQuery(".results").html(result); } }) }) }); </script> </head> <body> <input type="checkbox" name="checkbox[]" id="1" value="1"/> <input type="checkbox" name="checkbox[]" id="2" value="2"/> <input type="checkbox" name="checkbox[]" id="3" value="3"/> <input type="checkbox" name="checkbox[]" id="4" value="4"/> <input type="checkbox" name="checkbox[]" id="5" value="5"/> <input type="checkbox" name="checkbox[]" id="6" value="6"/> <div class="results"> </div> </body> </html>
– Bước 3: Tạo một file xuly.php trong localhost với nội dung như sau:
<?php $string= $_POST["id"] ; echo $string; ?>
Các bạn để ý : cặp thẻ này “<div class=”results”></div>” ở trong file index.php có tác dụng hiển thị giá trị trả về từ sever bằng cú pháp jQUery :
success: function(result){ jQuery(".results").html(result); }
Các bạn làm theo và chạy thử nhé, nhớ là phải chạy trong localhost nhé.
Thanks
Có thể bạn quan tâm?
Trắc nghiệm mới nhất
Phần mềm tải nhiều
-
1
Download Wondershare PDFelement - Phần mềm tạo chỉnh sửa file PDF chuyên nghiệp
747 2144 10/06/2022 -
2
Download Activate AIO Tools - Công cụ kích hoạt Windows và Office bản quyền
391 1798 14/12/2021 -
3
Download Game HITMAN 2 - Gold Edition (2018) torrent for PC
291 1674 09/06/2022 -
4
Download Net Support School - Phần mềm quản lý phòng tin học lab - Hướng dẫn cài đặt
240 1010 14/12/2021 -
5
Download Game Total War: THREE KINGDOMS torrent for PC
222 1780 09/06/2022 -
6
Download Game Just Cause 4: Complete Edition torrent for PC
184 1384 09/06/2022