国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

jQuery+Ajax+PHP無(wú)刷新分頁(yè)

lauren_liuling / 2977人閱讀

摘要:下載演示地址本文使用,通過(guò)實(shí)例講解如何實(shí)現(xiàn)無(wú)刷新分頁(yè)效果。當(dāng)數(shù)據(jù)完全加載完畢后,調(diào)用函數(shù)生成分頁(yè),也可用程序來(lái)實(shí)現(xiàn)分頁(yè)。頁(yè)面可在分頁(yè)的屬性中獲取。

下載演示地址:http://www.erdangjiade.com/js...
本文使用jQuery+Ajax+PHP+Mysql,通過(guò)實(shí)例講解如何實(shí)現(xiàn)Ajax無(wú)刷新分頁(yè)效果。

#ul_lists以列表的形式展現(xiàn)數(shù)據(jù),信息包括商品圖片和標(biāo)題 CSS.lists{width:740px; margin:30px auto 0; position:relative} #ul_lists li{float:left;width:220px;height:240px;margin:0 6px 6px;border:1px solid #ffffd;padding:5px;overflow:hidden} #ul_lists li img{width:220px; height:220px;margin:0 0 6px} .page{ margin:12px 0 20px; text-align:center} .page span{margin:5px; font-size:14px}jQuery首先聲明全局變量,后面分頁(yè)用到。 var page_cur = 1; //當(dāng)前頁(yè) var total_num, page_size, page_total_num;//總記錄數(shù),每頁(yè)條數(shù),總頁(yè)數(shù)接著通過(guò)函數(shù)getData() 獲取當(dāng)前頁(yè)數(shù)據(jù)。我們利用$.ajax GET方式把參數(shù)page以json格式傳到ajax.php。 function getData(page) { //獲取當(dāng)前頁(yè)數(shù)據(jù) $.ajax({ type: "GET", url: "ajax.php", data: { "page": page - 1 }, dataType: "json", success: function(json) { $("#ul_lists").empty(); total_num = json.total_num; //總記錄數(shù) page_size = json.page_size; //每頁(yè)數(shù)量 page_cur = page; //當(dāng)前頁(yè) page_total_num = json.page_total_num; //總頁(yè)數(shù) var li = ""; var list = json.list; $.each(list, function(index, array) { //遍歷返回json li += "
  • " + array["title"] + "
  • "; }); $("#ul_lists").append(li); }, complete: function() { getPageBar(); //js生成分頁(yè),可用程序代替 }, error: function() { alert("數(shù)據(jù)異常,請(qǐng)檢查是否json格式"); } }); }每次請(qǐng)求返回的商品放置在#ul_lists中。當(dāng)數(shù)據(jù)完全加載完畢后,調(diào)用函數(shù)getPageBar()生成分頁(yè),也可用程序來(lái)實(shí)現(xiàn)分頁(yè)。 function getPageBar() { //js生成分頁(yè) if (page_cur > page_total_num) page_cur = page_total_num; //當(dāng)前頁(yè)大于最大頁(yè)數(shù) if (page_cur < 1) page_cur = 1; //當(dāng)前頁(yè)小于1 page_str = "共" + total_num + "條" + page_cur + "/" + page_total_num + ""; if (page_cur == 1) { //若是第一頁(yè) page_str += "首頁(yè)上一頁(yè)"; } else { page_str += "首頁(yè)上一頁(yè)"; } if (page_cur >= page_total_num) { //若是最后頁(yè) page_str += "下一頁(yè)尾頁(yè)"; } else { page_str += "下一頁(yè)尾頁(yè)"; } $("#page").html(page_str); }最后,當(dāng)頁(yè)面第一次加載時(shí),我們加載第一頁(yè)數(shù)據(jù)即getData(1),當(dāng)點(diǎn)擊分頁(yè)條中的分頁(yè)鏈接時(shí),通過(guò)getData(page)加載對(duì)應(yīng)頁(yè)碼的數(shù)據(jù)。頁(yè)面page可在分頁(yè)的屬性data-page中獲取。 $("#page a").live("click",function() { //live 向未來(lái)的元素添加事件處理器,不可用bind var page = $(this).attr("data-page"); //獲取當(dāng)前頁(yè) getData(page) });PHPajax.php接收每次前端頁(yè)面的ajax請(qǐng)求,根據(jù)提交的頁(yè)碼page,計(jì)算總記錄數(shù)和總頁(yè)數(shù),讀取對(duì)應(yīng)頁(yè)碼下的數(shù)據(jù)列表,并將結(jié)果以JSON格式返回給前端頁(yè)面。 include_once("connect.php"); $page = intval($_GET["page"]); //當(dāng)前頁(yè) $total_num = mysql_num_rows(mysql_query("select id from goods")); //總記錄數(shù) $page_size = 6; //每頁(yè)數(shù)量 $page_total = ceil($total_num / $page_size); //總頁(yè)數(shù) $page_start = $page * $page_size; $arr = array("total_num" = >$total_num, "page_size" = >$page_size, "page_total_num" = >$page_total, ); $query = mysql_query("SELECT id,title,pic FROM goods ORDER BY ID ASC LIMIT $page_start,$page_size"); while ($row = mysql_fetch_array($query)) { $arr["list"][] = array("id" = >$row["id"], "title" = >$row["title"], "pic" = >$row["pic"], ); } echo json_encode($arr);最后附上goods表結(jié)構(gòu),下載壓縮包里也有哦~。 CREATE TABLE IF NOT EXISTS `goods` ( `id` int(8) NOT NULL AUTO_INCREMENT, `title` varchar(80) NOT NULL, `pic` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; [1]: http://www.erdangjiade.com/js/2.html [2]: /img/bVKyOj

    下載演示地址:http://www.erdangjiade.com/js...

    文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/66796.html

    相關(guān)文章

    • jQuery+Ajax+PHP無(wú)刷新分頁(yè)

      摘要:下載演示地址本文使用,通過(guò)實(shí)例講解如何實(shí)現(xiàn)無(wú)刷新分頁(yè)效果。當(dāng)數(shù)據(jù)完全加載完畢后,調(diào)用函數(shù)生成分頁(yè),也可用程序來(lái)實(shí)現(xiàn)分頁(yè)。頁(yè)面可在分頁(yè)的屬性中獲取。 下載演示地址:http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql,通過(guò)實(shí)例講解如何實(shí)現(xiàn)Ajax無(wú)刷新分頁(yè)效果。 #ul_lists以列表的形式展現(xiàn)數(shù)據(jù),信...

      wangzy2019 評(píng)論0 收藏0
    • jQuery+Ajax+PHP無(wú)刷新分頁(yè)

      摘要:下載演示地址本文使用,通過(guò)實(shí)例講解如何實(shí)現(xiàn)無(wú)刷新分頁(yè)效果。當(dāng)數(shù)據(jù)完全加載完畢后,調(diào)用函數(shù)生成分頁(yè),也可用程序來(lái)實(shí)現(xiàn)分頁(yè)。頁(yè)面可在分頁(yè)的屬性中獲取。 下載演示地址:http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql,通過(guò)實(shí)例講解如何實(shí)現(xiàn)Ajax無(wú)刷新分頁(yè)效果。 #ul_lists以列表的形式展現(xiàn)數(shù)據(jù),信...

      Kosmos 評(píng)論0 收藏0
    • jQuery+Ajax+PHP無(wú)刷新分頁(yè)

      摘要:下載演示地址本文使用,通過(guò)實(shí)例講解如何實(shí)現(xiàn)無(wú)刷新分頁(yè)效果。當(dāng)數(shù)據(jù)完全加載完畢后,調(diào)用函數(shù)生成分頁(yè),也可用程序來(lái)實(shí)現(xiàn)分頁(yè)。頁(yè)面可在分頁(yè)的屬性中獲取。 下載演示地址:http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql,通過(guò)實(shí)例講解如何實(shí)現(xiàn)Ajax無(wú)刷新分頁(yè)效果。 #ul_lists以列表的形式展現(xiàn)數(shù)據(jù),信...

      mengbo 評(píng)論0 收藏0
    • 一步步實(shí)現(xiàn)thinkphp上的ajax無(wú)刷新分頁(yè)

      摘要:信息列表循環(huán)賦值分頁(yè)信息部分這一步是實(shí)現(xiàn)無(wú)刷新分頁(yè)的重點(diǎn),用到了的通信,通過(guò)與數(shù)據(jù)庫(kù)的交互,將獲取到的數(shù)據(jù)寫(xiě)到模板中,替換掉之前的數(shù)據(jù)集,達(dá)到分頁(yè)的目的。 前言 thinkphp框架自帶的分頁(yè)類是每次翻頁(yè)都要刷新一下整個(gè)頁(yè)面,這種翻頁(yè)的用戶體驗(yàn)顯然是不太理想的,我們希望每次翻頁(yè)只刷新我們想要的數(shù)據(jù)集部分的數(shù)據(jù),這樣我們很容易想到ajax異步通信,用ajax與數(shù)據(jù)庫(kù)(本人在開(kāi)發(fā)過(guò)程中使用...

      張遷 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <