AJAX 例题[封装插件]【分页】

1.年月日使用 jq封装【需要引用ＪＱ和ｂｏｏｔｓｔｒａｐ】

这里面的 JQ 挂的点击事件之所以只调用一次只是因为前面 select 标签一次性加载完了否则点击事件需要多次加载

1.JS 封装部分

  1 // JavaScript Document
  2 $(document).ready(function(e) {
  3     var date = new Date();
  4     var ju = date.getFullYear();
  5     var ji = date.getMonth()+1;
  6     var jo = date.getDate();
  7     $("#n").html(ju);
  8     $("#y").html(ji);
  9     $("#r").html(jo);
 10     
 11 
 12     var str = "<select id='a'></select><select id='b'></select><select id='c'></select>";
 13     $("#atime").html(str);
 14     year();
 15     mounth();
 16     day();
 17     $("#a").click(function(){
 18         mounth();
 19         day();
 20         })
 21     $("#b").click(function(){
 22         day()
 23         })
 24 function year()
 25 {
 26         
 27         //var nian = parseInt(date.getFullYear());
 28         var nian = date.getFullYear();
 29         var str="";
 30         for( var i=nian-4; i<nian+4;i++)
 31         {
 32             if(i==nian)
 33             {str+="<option selected='selected'>"+i+"</option>";}
 34             else
 35             {
 36             str+="<option>"+i+"</option>";
 37             }
 38         }
 39         $("#a").html(str);
 40 }
 41     
 42 function mounth()
 43 {       var nian = $("#a").val()
 44         
 45         var yue = date.getMonth()+1;
 46         var str="";
 47         for( var i=1; i<=12;i++)
 48         {
 49             if(i==yue)
 50             {str+="<option selected='selected'>"+i+"</option>";}
 51             else
 52             {
 53             str+="<option>"+i+"</option>";
 54             }
 55         }
 56         $("#b").html(str);
 57 }
 58 function day()
 59 {        
 60         
 61         var nian = $("#a").val();
 62         var yue =$("#b").val();
 63         var day = parseInt(date.getDate());
 64         var str=""; 
 65     if(yue==4||yue==6||yue==9||yue==11)    
 66     {
 67         for(var i=0; i<=30; i++)
 68         {
 69             if(i==day)
 70             {str+="<option selected='selected'>"+i+"</option>";}
 71             else
 72             {
 73             str+="<option>"+i+"</option>";
 74             }    
 75         }        
 76     }
 77         
 78     if(yue==1||yue==3||yue==5||yue==7||yue==8||yue==10||yue==12)    
 79     {
 80         for(var i=0; i<=31; i++)
 81         {
 82             if(i==day)
 83             {str+="<option selected='selected'>"+i+"</option>";}
 84             else
 85             {
 86             str+="<option>"+i+"</option>";
 87             }    
 88         }        
 89     }    
 90         
 91         if(yue==2)
 92         {
 93         
 94                 if((nian%4==0&&nian%100!=0)||nian%400==0)
 95                 {
 96                     for(var i=0; i<=29; i++)
 97                     {
 98                         if(i==day)
 99                         {str+="<option selected='selected'>"+i+"</option>";}
100                         else
101                         {
102                         str+="<option>"+i+"</option>";
103                         }    
104                     }    
105                 }
106                 else
107                 {
108                     for(var i=0; i<=28; i++)
109                     {
110                         if(i==day)
111                         {str+="<option selected='selected'>"+i+"</option>";}
112                         else
113                         {
114                         str+="<option>"+i+"</option>";
115                         }    
116                     }    
117                     
118                 }
119         }
120         $("#c").html(str);
121 }    
122     
123 $("#tj").click(function(){
124     var n=$("#a").val();
125     var y=$("#b").val();
126     var r=$("#c").val();
127     $("#n").html(n);
128     $("#y").html(y);
129     $("#r").html(r);
130     
131     
132     
133     })
134     
135 });//ready

time.js

2.页面部分

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <link href="dist/css/bootstrap.min.css" rel="stylesheet">
 7 <script src="jquery-1.11.2.min.js"></script>
 8 <script src="time.js"></script>
 9 <script src="dist/js/bootstrap.min.js"></script>
10 </head>
11 <style>
12 *{ margin:0 auto; padding:0}
13 #atime{ width:200px; height:20px; background-color:#CCC; text-align:center; line-height:50px; vertical-align:central }
14 #shijian div{width:60px; height:60px; line-height:60px; vertical-align:middle; text-align:center; border-radius:100px; background-color:#CCC; float:left; box-shadow: inset 2px 2px 10px red}
15 </style>
16 <body>
17 
18 <h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" 
19    data-target="#myModal">
20    开始演示模态框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
21    aria-labelledby="myModalLabel" aria-hidden="true">
22    <div class="modal-dialog">
23       <div class="modal-content">
24          <div class="modal-header">
25             <button type="button" class="close" 
26                data-dismiss="modal" aria-hidden="true">
27                   &times;            </button>
28             <h4 class="modal-title" id="myModalLabel">
29                模态框（Modal）标题            </h4>
30          </div>
31          <div class="modal-body">
32             <div id="atime" ></div>         </div>
33          <div class="modal-footer">
34             <button type="button" class="btn btn-default" 
35                data-dismiss="modal">关闭            </button>
36                <button type="button" class="btn btn-default" 
37                data-dismiss="modal" id="tj">提交更改</button>
38            
39          </div>
40       </div><!-- /.modal-content --></div><!-- /.modal --></div>
41 
42 <div style="width:400px; height:60px" id="shijian"><div  id="n"></div><div>年</div><div id="y"></div><div>月</div><div id="r"></div><div>日</div></div>
43    
44 </body>
45 </html>

xianshi.html

2.分页查询与上题不同需要多次加载点击函数使用时最好转化为整型（虽然是弱类型语言但是最好亲自转化一下）

ＪＳＯＮ封装使用　　因为ｆｅｔｃｈ—ａｌｌ　可能有问题最好使用 fetch——row（如下）

 1 <?php
 2 class DBDA
 3 {
 4 public $hostname="localhost";
 5 public $username="root";
 6 public $mima="123";
 7 public $dbname="zhousan";
 8 public function Query($str,$t=0)
 9         {
10             $obj=new MySQLi($this->hostname,$this->username,$this->mima,$this->dbname);
11             $fanhui=$obj->query($str);
12             if($t==0)
13             {
14                 return $fanhui;
15             }
16             else
17             {        
18                 while($m=$fanhui->fetch_row())
19                 {
20                     $attr[]=$m;                    
21                 }
22                 return json_encode($attr);    
23                 
24             }
25         
26         }    
27         
28     
29 }
30 
31 
32 
33 ?>

DBDB.class.php

挂点击方法则是页面加载完成就已经　添加完成了点击事件　　而不是　　鼠标点击的时候才能挂上点击事件（只能给当前页面信息添加）　（所以　如果　所需信息　循环出现　那么　点击事件也应该循环　添加）　　

分页查询ＪＳ　部分　　

注意事项　　　１.挂点击方法（多次重复挂）；２．封装方法；　３.字符串　或其他类型　转化为整型（不转化则出错）【与上一个题的点击事件对比着看】

  1 // JavaScript Document
  2 //ＪＳ代码中　　如果　随意填入　　未注释的汉字　　则不能往下执行　　　　一行代码　写错　　同样不能　往下执行
  3 
  4 $(document).ready(function(e) {
  5     var b=1; //页码默认值
  6   
  7     //-------页码处理----------------------
  8     fenye(b);
  9     bianhua(b);
 10 });
 11 
 12 
 13 function fenye(b)
 14 { 
 15      var c=$("#biao").attr("code");//每页内容
 16 $.ajax({
 17          url:"yemachuli.php",
 18          async:false,
 19          data:{a2:c},
 20          type:"POST",
 21          dataType:"JSON",
 22          success: function(data){
 23              var gf=parseInt(data);
 24              var gt=parseInt(c);
 25              var yeshu=Math.ceil(gf/gt);
 26             
 27              if(b>0&&b<=5)
 28              { var s1="";
 29                 for(var i=1; i<=11; i++)
 30                   {
 31                      s1+="<span style='width:30px; height:20px' class='page' yeshu='"+i+"'>"+i+"</span>"   ;
 32                  }
 33                  var sa="<div  class='fanye'>上一页</span>"+s1+"<span class='fanye'>下一页</span>";
 34                  
 35                  $("#ye").html(sa);
 36              }
 37              
 38              if(b>6 && b<=yeshu-5)
 39              {
 40                  var s2="";
 41                 
 42                 for(var i=b-5; i<=b+5; i++)
 43                   {   
 44                      s2+="<span class='page' yeshu='"+i+"'>"+i+"</span>"   ;
 45                  }
 46                  var sb="<span class='fanye'>上一页</span>"+s2+"<span class='fanye'>下一页</span>";
 47                 
 48                 $("#ye").html(sb);
 49                  
 50              }
 51              
 52               if(b>yeshu-5&&b<=yeshu)
 53              {
 54                  var s3="";
 55                 for(var i=yeshu-10; i<=yeshu; i++)
 56                   {
 57                      s3+="<span class='page' yeshu='"+i+"'>"+i+"</span>"   ;
 58                  }
 59                  var sc="<span  class='fanye'>上一页</span>"+s3+"<span class='fanye'>下一页</span>";
 60                  $("#ye").html(sc);
 61              }
 62              }
 63             
 64                   
 65     })//table 的 ajax ;    
 66 }
 67 
 68 function bianhua(b)
 69 {
 70      var c=$("#biao").attr("code");//每页内容
 71  var c=$("#biao").attr("code");//每页内容
 72     $.ajax({
 73          url:"fenyechuli.php",
 74          async:false,
 75          data:{a:b,a2:c},
 76          type:"POST",
 77          dataType:"JSON",
 78          success: function(data){
 79             
 80             // var str="";
 81 //             for( var v in data)
 82 //             {
 83 //             str+="<tr><td>"+data[v][0]+"</td><td>"+data[v][1]+"</td><td>"+data[v][2]+"</td></tr>";     
 84 //             }
 85                   var str="";
 86              for( var v in data)
 87              {
 88                  var astr="";
 89                  for(var k in data[v])
 90                  {
 91                      
 92                     astr+="<td>"+data[v][k]+"</td>"; 
 93                  }
 94                  
 95              str+="<tr>"+astr+"</tr>";     
 96              }
 97              $("#liebiao").html(str);
 98 
 99              }
100     })//table 的 ajax ;    
101 
102     $(".page").click(function(){
103         b=$(this).attr("yeshu");
104         
105          b = parseInt(b);
106         fenye(b);
107         bianhua(b);
108         
109         
110         })
111     
112 }

JS部分 AJAX

3.分页实用的时候要引用ＪＱ包

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <script src="jquery-1.11.2.min.js"></script>
  7 <style type="text/css">
  8 .dangqian{ background-color:#69F}
  9 </style>
 10 </head>
 11 
 12 <body>
 13 
 14 <div>
 15 <input type="text" id="key" />
 16 <input type="button" value="查询" id="chaxun" />
 17 </div>
 18 
 19 <table width="100%" border="1" cellpadding="0" cellspacing="0">
 20     <tr>
 21         <td>代号</td>
 22         <td>名称</td>
 23         <td>父级代号</td>
 24     </tr>
 25     
 26     <tbody id="nr">
 27     
 28     
 29     
 30     </tbody>
 31     
 32 </table>
 33 
 34 <div id="xinxi">
 35 
 36 </div>
 37 
 38 </body>
 39 <script type="text/javascript">
 40 
 41 var page = 1; //当前页
 42 
 43 Load(); //加载数据
 44 LoadXinXi(); //加载分页信息
 45 
 46 //查询
 47 $("#chaxun").click(function(){
 48         page = 1;
 49         Load(); //加载数据
 50         LoadXinXi(); //加载分页信息
 51     })
 52 
 53 function Load()
 54 {
 55     var key = $("#key").val(); //查询条件
 56     
 57     $.ajax({
 58             url:"chuli.php",
 59             data:{page:page,key:key},
 60             type:"POST",
 61             dataType:"JSON",
 62             success: function(data){
 63                     var str = "";
 64                     for(var k in data)
 65                     {
 66                         str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";
 67                     }
 68                     $("#nr").html(str);
 69                 }
 70         });
 71 }
 72 
 73 function LoadXinXi()
 74 {
 75     var str = "";
 76     var minys = 1;
 77     var maxys = 1;
 78     var key = $("#key").val();
 79     
 80     //查总页数
 81     $.ajax({
 82             async:false,
 83             url:"zys.php",
 84             data:{key:key},
 85             type:"POST",
 86             dataType:"TEXT",
 87             success: function(d){
 88                     maxys = d;
 89                 }
 90         });
 91     
 92     str += "<span>总共："+maxys+"页</span> &nbsp;";
 93     str += "<span id='prev'>上一页</span>";
 94     
 95     for(var i=page-2;i<page+3;i++)
 96     {
 97         if(i>=minys && i<=maxys)
 98         {
 99             if(i==page)
100             {
101                 str += "<span class='dangqian' bs='"+i+"'>"+i+"</span> &nbsp;";
102             }
103             else
104             {
105                 str += "<span class='list' bs='"+i+"'>"+i+"</span> &nbsp;";
106             }
107         
108         }
109     }
110      
111     str += "<span id='next'>下一页</span>"; 
112     
113     $("#xinxi").html(str);
114     
115     //给上一页添加点击事件
116     $("#prev").click(function(){
117             page = page-1;
118             if(page<1)
119             {
120                 page=1;
121             }
122             Load(); //加载数据
123             LoadXinXi(); //加载分页信息
124         })
125     //给下一页加点击事件
126     $("#next").click(function(){
127             page = page+1;
128             if(page>maxys)
129             {
130                 page=maxys;
131             }
132             Load(); //加载数据
133             LoadXinXi(); //加载分页信息
134         })
135     //给中间的列表加事件
136     $(".list").click(function(){
137             page = parseInt($(this).attr("bs"));
138             Load(); //加载数据
139             LoadXinXi(); //加载分页信息
140         })
141 }
142 
143 </script>
144 </html>

text.php

模糊查询

 1 <?php
 2 include("DBDA.class.php");
 3 $db = new DBDA();
 4 
 5 $key = $_POST["key"];
 6 $num = 20;
 7 
 8 $sql = "select count(*) from chinastates where areaname like '%{$key}%'";
 9 
10 $zts = $db->StrQuery($sql);
11 
12 echo ceil($zts/$num);

zys.php

分页处理

 1 <?php
 2 include("DBDA.class.php");
 3 $db = new DBDA();
 4 
 5 $page = $_POST["page"];
 6 $key = $_POST["key"];
 7 $num = 20;
 8 $tiao = ($page-1)*$num;
 9 
10 $sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiao},{$num}";
11 
12 echo $db->JSONQuery($sql);

chuli.php

封装类

 1 <?php
 2 class DBDA
 3 {
 4     public $host="localhost";
 5     public $uid = "root";
 6     public $pwd = "123";
 7     public $dbname = "mydb";
 8     
 9     //成员方法
10     public function Query($sql,$type=1)
11     {
12         $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
13         $r = $db->query($sql);
14         
15         if($type==1)
16         {
17             return $r->fetch_all();
18         }
19         else
20         {
21             return $r;
22         }
23     }
24     
25     //返回字符串的方法
26     public function StrQuery($sql,$type=1)
27     {
28         $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
29         $r = $db->query($sql);
30         
31         if($type==1)
32         {
33             $attr = $r->fetch_all();
34             $str = "";
35             foreach($attr as $v)
36             {
37                 $str .= implode("^",$v)."|";
38             }
39             
40             return substr($str,0,strlen($str)-1);
41 
42         }
43         else
44         {
45             return $r;
46         }
47     }
48     
49     //返回JSON
50     function JSONQuery($sql,$type=1)
51     {
52         $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
53         $r = $db->query($sql);
54         
55         if($type==1)
56         {
57             return json_encode($r->fetch_all(MYSQLI_ASSOC));
58         }
59         else
60         {
61             return $r;
62         }
63     }
64 }

DBDA.class.php

posted @ 2017-01-10 15:32 get("新技能") 阅读(175) 评论(0) 编辑收藏举报

刷新页面返回顶部

张凯::get("新技能")

还活着，全力抢救中。==没什么好办法，拿过来试试，总有一款合适的。

AJAX 例题[封装插件]【分页】

公告