ajax分頁效果、分類聯動、搜索功能

時間  2019-12-14
標籤 ajax 分頁 效果 分類 聯動 搜索 功能 欄目 Ajax 简体版
原文   原文鏈接

1、使用smarty+ajax+php實現無刷新分頁效果

效果圖

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ajax分頁</title>
 6     <style>
 7         table{
 8             border-collapse: collapse;
 9             width:700px;
10             height:300px;
11             margin:0 auto;
12             text-align: center;
13         }
14         tr,td{
15             border:1px solid #ccc;
16         }
17         a{
18             margin-left:10px;
19             text-decoration: none;
20         }
21     </style>
22     <script src="../js/jquery-1.12.4.min.js"></script>
23     <script src="newpublic.js"></script>
24     <script>
25         $(function(){
26             //頁面載入後查看第一頁的數據
27             display(1);
28             //取得第page頁數據
29             function display(page){
30                 //page:頁碼
31                 $.get("page.php","page="+page,function(result){
32                     $("#content").html(result);
33                 })
34             }
35         })
36     </script>
37 </head>
38 <body>
39     <div id="content"></div>
40 </body>
41 </html>
分頁html代碼 
 1 <?php
 2 //禁止客戶端緩存數據
 3 header("Cache-Control:no-cache,must-revalidate");
 4     //鏈接數據庫服務器、選擇數據庫
 5     mysql_connect("localhost","root","111111");
 6     mysql_select_db("shop");
 7     mysql_query("set names gb2312");
 8     //sql語句
 9     $sql = "select count(*) as num from  category ;
10     $result =mysql_query($sql);
11     //遍歷結果集
12     $row =mysql_fetch_assoc($result)
13     //count總行數
14     $count = mysql_num_rows($result);
15     $pageCurrent = isset($_GET['page'])?$_GET['page']:1;//獲取當前頁碼
16     $pageSize =5;//每頁顯示多少條數據
17     $pageCount = ceil($count/$pageSize);//計算總頁數
18     $pagePrev = $pageCurrent-1;
19     $pageNext = $pageCurrent+1;
20     //判斷頁碼越界
21     if($pagePrev<1){
22         $pagePrev = 1;
23     }
24     if($pageNext>$pageCount){
25         $pageNext = $pageCount;
26     }
27     //判斷當前頁碼越界
28     if($pageCurrent<1){
29         $pageCurrent= 1;
30     }
31     if($pageCurrent>$pageCount){
32         $pageCurrent = $pageCount;
33     }
34     //偏移量
35     $offset = ($pageCurrent-1)*$pageSize;
36     $sql ="select * form category order by id desc limit $offset,$pageSize";
37     $result = mysql_query($sql);
38     $num = mysql_num_rows($result);
39     $data= array();
40     for($i=0;$i<$num;$i++){
41         $data[] = mysql_fetch_assoc($result);
42     }
43     mysql_close();
44     //引入smarty
45     include('Smarty/smarty.class.php');
46     $smarty =new Smarty();
47     $smarty->assign('data',$data);
48     $smarty->assign('count',$count);
49     $smarty->assign('pageCurrent',$pageCurrent);
50     $smarty->assign('pageCount',$pageCount);
51     $smarty->assign('pagePrev',$pagePrev);
52     $smarty->assign('pageNext',$pageNext);
53     $smarty->assign('pageSize',$pageSize);
54     str =smarty->fetch('page.htpl');
55     header('Content-Type:text/html;charset=gb2312');
56     echo str;
57 ?>
分頁php代碼 
 1 <table>
 2     <tr>
 3         <td>序號</td>
 4         <td>分類名</td>
 5         <td>描述</td>
 6     </tr>
 7     {foreach form=$data item='value'}
 8     <tr>
 9         <td>{counter}</td>
10         <td>{$value['name']}</td>
11         <td>{$value['content']}</td>
12     </tr>
13     {/foreach}
14     <tr>
15         <td colspan='3'>
16             共{$count}條數據
17             共{$pageCount}頁
18             每頁{$pageSize}條
19             當前第{$page}頁
20             <a href="#" onclick="display(1);">首頁</a>
21             <a href="#" onclick="display({$pagePrev});">上一頁</a>
22             <a href="#" onclick="display({$pageNext});">下一頁</a>
23             <a href="#" onclick="display({$pageCount});">尾頁</a>
24         </td>
25     </tr>
26 </table>
smart之page.htpl

 2、分類聯動

相關代碼：php

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>分類聯動</title>
 6     <style>
 7         form{
 8             width:600px;
 9             margin:50px auto;
10             display: flex;
11         }
12         form div{
13             margin-left:20px;
14         }
15         select{
16             width:200px;
17             height:36px;
18             padding:0 15px;
19         }
20     </style>
21     <script src="../js/jquery-1.12.4.min.js"></script>
22     <script src="public.js"></script>
23     <script>
24         $(function(){
25             //填充省分內容
26             province();
27             //每次省份改變，顯示對應的城市
28             $("#province").change(function(){
29                 city();
30             });
31             function province(){
32                 var province = "";
33                 $.get("kind.php",'cid=0',function(result){
34                     //第二種方式
35                     for(var j=0;j<result.length;j++){
36                         //建立option元素
37                         var op = new Option(result[i].name,result[i].id);
38                         $("#province").options.add(op);
39                     }
40 
41                 },'json');
42             }
43             function city(){
44                 if($("#province").val() == 0){
45                     return false;
46                 }
47                 //每次值改變，清空上次城市的值
48                 $("#city").children().remove();
49                 $.get("kind.php",'cid='+$("#province").val(),function(result){
50                     var city="<option value='0'>請選擇城市</option>";
51                     for(var i=0;i<result.length;i++){
52                         city +="<option value='"+result[i].id+"'>"+result[i].name+"</option>";
53                     }
54                     $("#city").append(city);
55                 },'json')
56             }
57         })
58     </script>
59 </head>
60 <body>
61 <form>
62     <div>
63         <label for="province">省：</label>
64         <select name="province" id="province">
65             <option value="0">請選擇省份</option>
66         </select>
67     </div>
68     <div>
69         <label for="city">市：</label>
70         <select name="city" id="city">
71             <option value="">請選擇城市</option>
72         </select>
73     </div>
74 </form>
75 
76 </body>
77 </html>
分類聯動 
 1 <?php
 2 //禁止客戶端緩存數據
 3 header("Cache-Control:no-cache,must-revalidate");
 4     $cid = $_GET['cid'];
 5     //鏈接數據庫服務器、選擇數據庫
 6     mysql_connect("localhost","root","111111");
 7     mysql_select_db("shop");
 8     mysql_query("set names gb2312");
 9     //sql語句
10     $sql = "select * from  kind where cid = '$cid' order by id desc";
11     $result =mysql_query($sql);
12     $num = mysql_num_rows($result);
13    $data =array();
14    for($i=0;$i<$num;$i++){
15         $row = mysql_fetch_assoc($result);
16         $row['name'] = iconv('gb2312','utf-8',$row['name']);
17         $data[] = $row;
18    }
19     mysql_close();
20     echo json_encode($data);
21 
22 ?>
分類聯動php代碼

3、搜索功能

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jsonp</title>
 6     <link rel="stylesheet" href="../css/reset.css">
 7     <style>
 8         .con{
 9             width:400px;
10             margin:50px auto;
11             font-size: 0;
12         }
13         .con input{
14             width:270px;
15             height:6px;
16             padding:15px;
17         }
18         .con button{
19             width:96px;
20             height:40px;
21             line-height:40px;
22             border:none;
23             font-size:14px;
24             padding: 0;
25             background:#3385ff;
26             border-bottom:1px solid #2d78f4;
27             color:#fff;
28         }
29         .search_content{
30             font-size:14px;
31             border:1px solid #ccc;
32             margin-top:-1px;
33             display: none;
34         }
35         .search_content li{
36             padding: 2px 15px;
37             margin-top:5px;
38         }
39         .search_content li:nth-child(1){
40             margin-top: 0;
41         }
42         .search_content li:hover{
43             background:#cccccc;
44             cursor: pointer;
45         }
46     </style>
47     <script src="../js/jquery-1.12.4.min.js"></script>
48     <script>
49         $(function(){
50             $("#search").keyup(function(){
51                 var keyword = $(this).val();
52                 //使用$.trim()方法去除字符串兩端的空白字符
53                 if($.trim(keyword).length == 0){
54                     return false;
55                 }
56                 $.ajax({
57                     url:"https://sug.so.360.cn/suggest?",
58                     type:"get",
59                     dataType:"jsonp",
60                     data:{word:keyword}
61                 }).done(function(data){
62                     if(data.p == true){
63                         var str = "";
64                         if(data.s.length>0){
65                             for(var i=0;i<data.s.length;i++){
66                                 str +="<li>"+data.s[i]+"</li>";
67                             }
68                             $(".search_content").html(str);
69                             $(".search_content").show();
70                         }else{
71                             $(".search_content").html(str);
72                             $(".search_content").hide();
73                         }
74 
75                     }
76                     console.log(data)
77                 }).fail(function(error){
78                     console.log("error");
79                 })
80             });
81             $(".search_content").delegate("li","click",function(){
82                 $("#search").val($(this).html());
83                 $(this).parent().hide();
84             })
85         })
86     </script>
87 </head>
88 <body>
89 <div class="con">
90     <input id="search" type="text"  placeholder="請輸入內容">
91     <button>搜索</button>
92     <ul class="search_content"></ul>
93 </div>
94 </body>
95 </html>
搜索功能代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程