Hướng dẫn lấy dữ liệu từ nhiều checkbox bằng Ajax /jQUery và PHP

jQuery And Ajax

Ở 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="http://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

Bài viết liên quan