zoukankan      html  css  js  c++  java

  • jquery+php+mysql实现Ajax省市县三级联动

    1、第一步建立一个html页面的，放置省、市、县三个select选择框，代码如下：

    [html] view plain copy 在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <title></title>  
    5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    6.         <script src="./js/jquery-1.8.3.min.js" type="text/javascript"></script>  
    7.         <script type="text/javascript">  
    8.             $(document).ready(function() {  
    9.                 //  加载所有的省份  
    10.                 $.ajax({  
    11.                     type: "get",  
    12.                     url: "region_action.php", // type=1表示查询省份  
    13.                     data: {"parent_id": "1", "type": "1"},  
    14.                     dataType: "json",  
    15.                     success: function(data) {  
    16.                         $("#provinces").html("<option value=''>请选择省份</option>");  
    17.                         $.each(data, function(i, item) {  
    18.                             $("#provinces").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");  
    19.                         });  
    20.                     }  
    21.                 });  
    22.   
    23.                 $("#provinces").change(function() {  
    24.                     $.ajax({  
    25.                         type: "get",  
    26.                         url: "region_action.php", // type =2表示查询市  
    27.                         data: {"parent_id": $(this).val(), "type": "2"},  
    28.                         dataType: "json",  
    29.                         success: function(data) {  
    30.                             $("#citys").html("<option value=''>请选择市</option>");  
    31.                             $.each(data, function(i, item) {  
    32.                                 $("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");  
    33.                             });  
    34.                         }  
    35.                     });  
    36.                 });  
    37.   
    38.                 $("#citys").change(function() {  
    39.                     $.ajax({  
    40.                         type: "get",  
    41.                         url: "region_action.php", // type =2表示查询市  
    42.                         data: {"parent_id": $(this).val(), "type": "3"},  
    43.                         dataType: "json",  
    44.                         success: function(data) {  
    45.                             $("#countys").html("<option value=''>请选择县</option>");  
    46.                             $.each(data, function(i, item) {  
    47.                                 $("#countys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");  
    48.                             });  
    49.                         }  
    50.                     });  
    51.                 });  
    52.             });  
    53.         </script>  
    54.           
    55.     </head>  
    56.     <body>  
    57.         <div>  
    58.             省份：  
    59.             <select id="provinces">  
    60.                 <option value="">请选择省份</option>  
    61.             </select>  
    62.             市：  
    63.             <select id="citys">  
    64.                 <option value="">请选择市</option>  
    65.             </select>  
    66.             县：  
    67.             <select id="countys">  
    68.                 <option value="">请选择县</option>  
    69.             </select>  
    70.         </div>  
    71.     </body>  
    72. </html>  


    第二步：建立一个处理请求的PHP文件，如下：

    [php] view plain copy 在CODE上查看代码片派生到我的代码片
    1. <?php  
    2.   
    3. //封装的数据操作类
    4. require_once './Config/config.php';  
    5. require_once './plugins/DBHelper.php';  
    6.   
    7. $type = isset($_GET["type"]) ? $_GET["type"] : "";  
    8. $parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : "";  
    9.   
    10. // 链接数据库代码（没有源文件，直接写个链接数据的代码根据条件去查地区表就可以了）  
    11. if ($type == "" || $parent_id == "") {  
    12.     exit(json_encode(array("flag" => false, "msg" => "查询类型错误")));  
    13. } else {    
    14.     // 链接数据库  
    15.     $db = new DBHelper("localhost", "root", "root", "region");  
    16.     $provinces = $db->getSomeResult("global_region", "region_id,region_name", "parent_id={$parent_id} and region_type={$type}");  
    17.     $provinces_json = json_encode($provinces);  
    18.     exit($provinces_json);  
    19. }  
    20.   
    21. ?>  

    第三步：其实这一步也是前提，就是要在mysql数据库中建一个地区表，此表结构简单，但是数据很多，大概3千多条，先列出表结构，具体数据请看代码附件。

    [sql] view plain copy 在CODE上查看代码片派生到我的代码片
    1. CREATE TABLE `global_region` (  
    2.   `region_id` smallint(5) unsigned NOT NULL AUTO_INCREMENT,  
    3.   `parent_id` smallint(5) unsigned NOT NULL DEFAULT '0',  
    4.   `region_name` varchar(120) NOT NULL DEFAULT '',  
    5.   `region_type` tinyint(1) NOT NULL DEFAULT '2',  
    6.   PRIMARY KEY (`region_id`),  
    7.   KEY `parent_id` (`parent_id`),  
    8.   KEY `region_type` (`region_type`)  
    9. ) ENGINE=MyISAM AUTO_INCREMENT=3409 DEFAULT CHARSET=utf8;  


    最终结果如下：
  • 相关阅读:
    Backbone学习之todos实现
    由$(this).attr('id')引出的一点感想
    JS类的实现
    JS设计模式之接口
    JS设计模式之工厂模式
    JS设计模式之序
    JS的继承
    you think you know javascript?
    js中的null和undefined
    作用域、闭包等概念的理解
  • 原文地址：https://www.cnblogs.com/jhy-ocean/p/6247919.html
Copyright © 2011-2022 走看看