PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

เทคนิค วนลูปแสดงรายการ ด้วย ajax ตามกำหนดเวลา ด้วย jquery

06 December 2014 By


โค้ดต่อไปนี้เป็นแนวทางการประยุกต์การใช้งาน jquery ในการดึงข้อมูลมาแสดง บางส่วนในเว็บไซต์
แบบกำหนดให้ดึงข้อมูลมาเป็นส่วนๆ เช่น เรามีข่าว และต้องการ ให้วนลูปแสดงข่าวนั้น ครั้งละ 4-5 หัวข้อ
โดยดึงจากฐานข้อมูล วนไปเรื่อยๆ จนครบ แบบนี้เป็นต้น
 
ก่อนอื่น ให้กำหนดส่วนของตำแหน่งข้อมูลที่เราต้องการแสดง ด้วย id เช่นตัวอย่่าง
 
   <div id="place-data">
   </div>  

 
เรากำหนด div มี id เท่ากับ place-data ส่วนนี้ ก็คือส่วนที่เราจะอ้างอิง และดึงข้อมูลมาแสดง
 
โค้ดไฟล์ ทดสอบ ajax_autoload.php  คำอธิบายแสดงในโค้ด
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">    
</head>
<body>
<br><br>
<div style="width:80%;margin:auto;">
<div class="container-fluid">
    <div id="place-data">
    </div>  
</div>
</div>
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript">
$(function(){
    
    var per_page=7;  // จำนวนรายการที่ต้องการแสดงต่อหน้า
    var start_page=0;  // ค่าเริ่มต้นของหน้าแรก
    var step_page=0;  // ค่าสำหรับคำนวนการกำหนดหน้าแรก
    var loadData; // กำหนดสำหรับเป็นชื่อตัวแปร ฟังก์ชั่น
    var interValID=null;  // เก็บค่าการวนทำงานของเวลา
    function loadData(){
        start_page=parseInt(step_page)*per_page;
        step_page++;
        $.get("load_data.php",{
            per_page:per_page,
            start_page:start_page
        },function(data){
            
            var numData = $(data).find(".data-return").length; // มีรายการหรือไม่ นับจำนวน
            if(numData>0){ // ถ้ามีมากกว่า 0 
                $("#place-data").html(data); // นำข้อมูลมาแสดงใน div 
                if(numData<per_page){ // ถ้ารายการที่แสดงถึงหน้าสุดท้าย 
                    // หากต้องการให้วนลูปไปเริ่มต้นนับใหม่ ให้ตั้งค่า step_page=0; 
                    step_page=0; // วนมาเริ่มต้นใหม่ หรือใส่คำสั่งอื่นๆ ตามต้องการ
                    // หากต้องการหลุดการทำงานเมื่อถึงหน้าสุดท้าย เปิด ใช้งาน คำสั่งด้านล่าง
                    // clearInterval(interValID); 
                }
            }else{
                step_page=0; // วนมาเริ่มต้นใหม่ หรือใส่คำสั่งอื่นๆ ตามต้องการ
                clearInterval(interValID);             
                loadData();  // ทำงานครั้งแรกทันทีอีกครั้ง 
                interValID = setInterval(loadData,5000); // ทำงานลูปอีกครั้ง และต่อไปทุก 5 วินาที       
            }
            
        });  
    };    
    loadData();  // ทำงานครั้งแรกทันที 1 ครั้ง
    interValID = setInterval(loadData,5000); // ทำงานอีกครั้ง และต่อไปทุก 5 วินาที       
    
});
</script>            
</body>
</html>
 
ต่อไป สร้างไฟล์ load_data.php สำหรับดึงข้อมูลจากฐานข้อมูล
ให้จัดรูปแบบโค้ดตามต้องการ 
 
<?php
header("Content-type:text/html; charset=UTF-8");          
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);    
// เชื่อมต่อกับฐานข้อมูล    
$link=mysql_connect("localhost","root","test"); // เชื่อมต่อ Server      
mysql_select_db("test");  // ติดต่อฐานข้อมูล      
mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล     
?>
<table class="table table-striped table-condensed">
<?php
$q="
SELECT * FROM province_th 
LIMIT ".$_GET['start_page'].",".$_GET['per_page']."
";
$qr=mysql_query($q);
while($rs=mysql_fetch_assoc($qr)){
?>
    <tr class="data-return">
        <td><?=$rs['province_name']?></td>
    </tr>
<?php } ?>    
 
 
สังเกตในโค้ต ในลูปการวนแสดงข้อมูล เราต้องใส่ class ให้กับ tr ในที่นี้ใช้ชื่อว่า data-return 
หากรูปแบบการแสดงของเราไม่ได้เป็นแบบตาราง เช่น ใช้ div ก็ให้ใส่ class เข้าไปใน div แทน tr 
css class นี้เราจะเอาไว้ใช้ในการนับจำนวนข้อมูล เช่น ถ้าถึงหน้าสุดท้าย แสดงว่า 
จำนวนก็จะน้อยกว่าหรือเท่ากับ เพื่อเป็นเงื่อนไขในการวนลูป หรือหยุดการทำงาน
 
จากโค้ดด้านบนของไฟล์ ajax_autoload.php จะเป็นคำสั่งในการทำงานแบบวนลูป 
หากต้องการให้หยุดทำงาน เมื่อถึงหน้าสุดท้ายแล้ว สามารถปรับบางส่วนของโค้ดได้ดังนี้
 
            var numData = $(data).find(".data-return").length; // มีรายการหรือไม่ นับจำนวน
            if(numData>0){ // ถ้ามีมากกว่า 0 
                $("#place-data").html(data); // นำข้อมูลมาแสดงใน div 
                if(numData<per_page){ // ถ้ารายการที่แสดงถึงหน้าสุดท้าย 
                    // หากต้องการให้วนลูปไปเริ่มต้นนับใหม่ ให้ตั้งค่า step_page=0; 
//                    step_page=0; // วนมาเริ่มต้นใหม่ หรือใส่คำสั่งอื่นๆ ตามต้องการ
                    // หากต้องการหลุดการทำงานเมื่อถึงหน้าสุดท้าย เปิด ใช้งาน คำสั่งด้านล่าง
                     clearInterval(interValID); 
                }
            }else{
                step_page=0; // วนมาเริ่มต้นใหม่ หรือใส่คำสั่งอื่นๆ ตามต้องการ
                clearInterval(interValID);             
//                loadData();  // ทำงานครั้งแรกทันทีอีกครั้ง 
//                interValID = setInterval(loadData,5000); // ทำงานลูปอีกครั้ง และต่อไปทุก 5 วินาที       
            }

Tags:: กำหนดเวลา ajax แสดง วนลูป

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง