jQuery load Content และคลิกลิ้งค์ให้ รีโหลดเนื้อหา ภายในหน้านั้นได้เลย

7 มี.ค. 2016 , 5,249 Views , หมวดหมู่ jQuery,JavaScript,Ajax MySQL PHP ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:jQuery, load Content, loading

สามารถประยุกต์ใช้ ในดึงข้อมูลจากฐานข้อมูลมาแสดงได้ครับ

หน้าหลักสำหรับดึง Content มาแสดง main.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main</title>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function(){

//แสดงข้อมูลตอนเพจโหลด
 $("#loading_img").show(); //แสดงรูปภาพ loading
 //ดึงข้อมูลในหน้า content.php มาแสดงใน #showcontent พร้อมส่งค่า id=1
 $("#showcontent").load("content.php?id="+1,function(responseTxt,statusTxt,xhr){
   if(statusTxt=="success") //หากดึงข้อมูลมาแสดงสำเร็จ
     $("#loading_img").hide(); //ซ่อนรูปภาพ loading
  });
 
 //แสดงข้อมูลตอนคลิกลิ้งค์
 $("body").on("click",".browse_page a",function(event){
   event.preventDefault();
   var url=$(this).attr("href");
//แสดงแบบปกติ
  $("#loading_img").show(); //แสดงรูปภาพ loading
   $("#showcontent").load(url,function(responseTxt,statusTxt,xhr){
   if(statusTxt=="success")
     $("#loading_img").hide(); //ซ่อนรูปภาพ loading
  });

   return false;
  });
 
});
</script>
<h1>หน้า Main</h1>
<div id="showcontent">
<img src="img/loading_img.gif" id="loading_img" />
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

$(document).ready(function(){

//แสดงข้อมูลตอนเพจโหลด

$("#loading_img").show(); //แสดงรูปภาพ loading

//ดึงข้อมูลในหน้า content.php มาแสดงใน #showcontent พร้อมส่งค่า id=1

$("#showcontent").load("content.php?id="+1,function(responseTxt,statusTxt,xhr){

if(statusTxt=="success") //หากดึงข้อมูลมาแสดงสำเร็จ

$("#loading_img").hide(); //ซ่อนรูปภาพ loading

});

//แสดงข้อมูลตอนคลิกลิ้งค์

$("body").on("click",".browse_page a",function(event){

event.preventDefault();

var url=$(this).attr("href");

//แสดงแบบปกติ

$("#loading_img").show(); //แสดงรูปภาพ loading

$("#showcontent").load(url,function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

$("#loading_img").hide(); //ซ่อนรูปภาพ loading

});

return false;

});

</script>

</div>

</body>

</html>

หน้า Content.php

<h2>หน้า Content</h2>
<?php
echo "id=".$_GET["id"];
?>
<br />
<div class="browse_page">
<a href="content.php?id=1" >คลิกกำหนด id=1</a> |
<a href="content.php?id=2" >คลิกกำหนด id=2</a>
</div>

<h2>หน้า Content</h2>

<?php

echo "id=".$_GET["id"];

<br />

<a href="content.php?id=1" >คลิกกำหนด id=1</a> |

<a href="content.php?id=2" >คลิกกำหนด id=2</a>

</div>

ป้ายกำกับ:jQuery, load Content, loading

jQuery load Content และคลิกลิ้งค์ให้ รีโหลดเนื้อหา ภายในหน้านั้นได้เลย

หมวดหมู่

ติดต่อเรา

ติดตามเรา

jQuery load Content และคลิกลิ้งค์ให้ รีโหลดเนื้อหา ภายในหน้านั้นได้เลย

หมวดหมู่

Popular Posts

ป้ายกำกับ

ติดต่อเรา

ติดตามเรา