jquery中ajax load執行個體

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

例如下面iplaysoft網站中這部分的功能。?

你也可以先看看我做的一個小

代碼如下

複製代碼

<!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>AJAX LOAD</title>
<style type="text/css">
*{margin:0px;padding:0px;font-size:14px;font-family:Verdana, Arial, Helvetica, sans-serif;}
a{text-decoration:none;}
.c{clear:both;height:0px;}
h3{width:450px;margin:20px auto 0px auto;font-size:16px;text-align:center;}
small{font-size:12px;color:#999999;}
.nav{width:450px;margin:0px auto;height:auto;}
.nav li{float:left;margin:5px;list-style:none;}
.nav li a{background:url(btn.jpg) no-repeat;width:12px;height:12px;display:block;}
.nav li a:hover,.nav li a#now{background-position:-12px;}
#hello{width:450px;border:1px #CCCCCC solid;margin:10px auto 0px auto;}
#hello a{display:block;padding:7px;border-top:#CCCCCC 1px dashed;color:#666666;}
#hello a#first{border:none;}
#hello a:hover{color:#000000;background:#F7F7F7;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

</head>

<body>

<h3>Ajax load <small>paperen</small></h3>
<div id="ajaxload">
<img src="loading.gif" alt="" />
<script language="javascript" type="text/javascript">
$("#ajaxload").load("test.php");
function nextpage(page){
$("#ajaxload").load("test.php",{'page':page});
}
</script>
</div>

</body>
</html>

點擊每個tab可以轉換看到不同的資訊內容。下面來看看是怎樣實現的吧，其實簡單來說需要兩個檔案就可以了，一個是顯示給大家看的它可以是html的也可以是php等動態網頁格式（作為架構就是下面的index.html），另一個就必須是一個CGI格式的檔案，因為它是用來獲得觸發並使資訊改變的?

首先要引入jquery架構

代碼如下	複製代碼
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>

然後在那個index頁中放上一個div作為容器，對於容器的選取大家可以根據自己需要就行，也不是非要用div來做，並給它一個id號作為鉤子。然後直接寫指令碼。

代碼如下	複製代碼
<div id="ajaxload"> <script language="javascript" type="text/javascript"> $("#ajaxload").load("test.php");//預設讓這個div載入test.php的內容 </script> </div>

先來看看可不可以載入test頁的東西吧，我們隨便在test那個頁中寫個hello之類的東西。

果然這個方法是可以滴，那麼我們再來進一步擴充，去實現我們的功能。我們就參照上面那個模板弄吧，當然大家可以發揮自己的想象力去實現別的效果。ajaxload這個div裡面的布局大概如下，當然因為這整個div的內容都是來自test頁面的，所以在test頁中放上下面這個架構就行。?

代碼如下	複製代碼
<div id="hello"> <a href="#">message</a> </div> <ul class="nav"> <li><a href="#">1</a></li> </ul> <div class="c"></div>

然後再寫php代碼去實現hello那個div中抽取資料庫的資訊，nav那為頁數顯示（php代碼這裡就不放出來了，比較的多，主要要實現讀取資料庫資訊，還有根據頁數分頁顯示資料）。對於分頁的功能這裡自己也寫一下吧，paperen我目前為止還是這樣寫的。?

代碼如下

複製代碼

    $each=5;//定義每頁顯示資料數
    $page=isset($_POST['page']) ? intval($_POST['page']) : 1;//檢查是否存在page變數並過濾
    $db=new sql();//建立一個對象（這裡sql類就不貼出來了，因為比較長而且涉及到一些敏感資訊）
    $total=$db->getcount("select count(*) from `table`");//擷取資料總數
    $pagenum=($total%$each==0) ? $total/$each : (int)($total/$each)+1;//並確定頁數
    $page=($page>$pagenum || $page<=0) ? 1 : $page; //對page變數做進一步正確過濾
    $offset=($page-1)*$each;//獲得查詢的資料位元置
    $sql="SELECT id,title FROM `table` ORDER BY id Desc LIMIT $offset,$each";//sql語句

然後用一個for迴圈用來顯示頁數就行,因為已經知道總頁數$pagenum了。

代碼如下	複製代碼
<ul class="nav"> <?php for($i=1;$i<=$pagenum;$i++){ ?> <li><a href="javascript:void(0);"></a></li> <?php } ?> </ul> <div class="c"></div>

再寫寫css來美化一下頁面。效果如下。?

還差最後一步了，互動功能的實現，就是我們點擊橙色的小點時，上面的資訊會隨著變化，也是比較重點之處，不知道各位小朋友看到這裡有沒有什麼思路，paperen我是覺得先看看能不能在本index頁面獲得test頁面的元素並接收它的動作吧，我為<li><a href="javascript:void(0);"></a></li>加上一個點擊事件

再測試看看行不行。

果然可以，嘻嘻這下就好辦了。再在這個超連結的click事件用一個函數來處理，在index頁面加上一些指令碼。

代碼如下	複製代碼
<li><a href="javascript:void(0);" onClick="nextpage(<?=$i?>)"></a></li> <script language="javascript" type="text/javascript"> $("#ajaxload").load("test.php"); function nextpage(page){ $("#ajaxload").load("test.php",{'page':page}); } </script>

注意一下load事件是用post的方法傳送資料的，也就是為什麼要在test頁中用$_POST去接收page這個變數。?

真的是很不錯的前台效果，大家可以回去自己試試,其實看了這麼多最簡單就是 $("#ajaxload").load("test.php",{'page':page});就可以解決了，比起post,get感覺還要方便啊。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More