AJAX三级联动实例

时间：2016-02-22 11:48:50 阅读：151 评论：0 收藏：0 [点我收藏+]

标签：

  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 <script src="jquery-1.11.2.min.js"></script>
  6 <title>无标题文档</title>
  7 </head>
  8 
  9 <body>
 10 
 11 <div>
 12 
 13 <?php
 14     
 15     include("mydbda.php");
 16     $db = new mydbda();
 17     
 18     //加载省份
 19     $sqls = "select * from ChinaStates where ParentAreaCode=‘0001‘";
 20     $strs = $db->Select($sqls,"CX","mydb");
 21     echo "<select id=‘sheng‘>";
 22     $hangs = explode("|",$strs);
 23     for($i=0;$i<count($hangs);$i++)
 24     {
 25         $lies = explode("^",$hangs[$i]);
 26         
 27         echo "<option value=‘".$lies[0]."‘>".$lies[1]."</option>";
 28     }
 29     echo "</select>";        
 30     
 31 ?>
 32 <select id="shi"></select>
 33 <select id="qu"></select>
 34 
 35 </div>
 36 
 37 </body>
 38 
 39 <script type="text/javascript">
 40 $(document).ready(function(e) {
 41     
 42     FillShi();
 43     FillQu();
 44     
 45     $("#sheng").change(function(){
 46         
 47         FillShi();
 48         FillQu();
 49         
 50         })
 51     $("#shi").change(function(){
 52         FillQu();
 53         })
 54     
 55     
 56     function FillShi()
 57     {
 58         
 59         var code = $("#sheng").val();
 60         
 61         $.ajax({
 62             async:false, //异步
 63             url:"chuli.php",
 64             data:{code:code},
 65             type:"POST",
 66             datatype:"TEXT",
 67             success: function(data){
 68                 
 69                     var hang = data.split(‘|‘);
 70                     var s = "";
 71                     for(var i=0;i<hang.length;i++)
 72                     {
 73                         var lie = hang[i].split(‘^‘);
 74                         s = s+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
 75                     }
 76                     
 77                     $("#shi").html(s);
 78                 
 79                 }
 80             
 81             });
 82     }
 83     
 84     function FillQu()
 85     {
 86         var code = $("#shi").val();
 87         $.ajax({
 88             async:false,
 89             url:"chuli.php",
 90             data:{code:code},
 91             type:"POST",
 92             datatype:"TEXT",
 93             success: function(data){
 94                 
 95                     var hang = data.split(‘|‘);
 96                     var s = "";
 97                     for(var i=0;i<hang.length;i++)
 98                     {
 99                         var lie = hang[i].split(‘^‘);
100                         s = s+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
101                     }
102                     
103                     $("#qu").html(s);
104                 
105                 }
106             
107             });
108     }
109     
110     
111 });
112 </script>
113 
114 </html>

mydbda.php

 1 <?php
 2     class mydbda
 3     {
 4         var $host = "localhost";
 5         var $username = "root";
 6         var $password = "123";
 7         var $database = "mydb";
 8         
 9         /**
10             功能：执行SQL语句，返回结果
11             参数：$sql:要执行的SQL语句
12                  $type：SQL语句的类型，CX代表查询，QT代表其他
13                  $data:要操作的数据库
14             返回值：如果是查询，返回结果集
15                   如果是其他语句，执行成功返回OK，失败返回NO
16         */
17         function Select($sql,$type,$data)
18         {
19             
20             //1.造连接对象
21             $db = new mysqli($this->host,$this->username,$this->password,$data);
22             
23             //2.判断是否连接成功
24             if(mysqli_connect_error())
25             {    
26                 echo "连接失败";
27                 
28                 //退出整个程序
29                 exit;
30             }
31             else
32             {
33                 //4.执行SQL语句
34                 
35                 $result = $db->query($sql);
36                 
37                 if($type == "CX")
38                 {
39                     $str = "";
40                     
41                     while($row = $result->fetch_row())
42                     {
43                         for($i=0;$i<count($row);$i++)
44                         {
45                             $str=$str.$row[$i]."^";
46                         }
47                         $str = substr($str,0,strlen($str)-1);
48                         $str = $str."|";
49                         
50                     }
51                     $str = substr($str,0,strlen($str)-1);
52                     return $str;
53                 }
54                 else
55                 {
56                     if($result)
57                     {
58                         return "OK";
59                     }
60                     else
61                     {
62                         return "NO";
63                     }
64                 }
65                 
66         
67             }
68         }
69 
70         
71     
72     }
73 ?>

chuli.php

 1 <?php
 2 include("mydbda.php");
 3 
 4 $code = $_POST["code"];
 5 
 6 $sql = "select * from ChinaStates where ParentAreaCode = ‘".$code."‘";
 7 
 8 $db = new mydbda();
 9 $str = $db->Select($sql,"CX","mydb");
10 echo $str;
11 ?>

AJAX三级联动实例

标签：

原文地址：http://www.cnblogs.com/sihuiming/p/5206560.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行