jquery_ajax 地址三级联动

jquery 的三级地址联动，原理与javascript类似，只是在触发请求的时候，使用封装好的 $.get ,$post,$.ajax 方法去执行，其余的都是一样的，后台服务器请求文件是一样的，前台html样式和方法也是一样的

1. 写一个服务器文件 server_jquery.php ，如下：

 1 <?php 
 2     // 服务器连接
 3     mysql_connect("localhost","root","root") or die(mysql_error());
 4     // 数据库选定
 5     mysql_select_db("ajax_demo");
 6     // 字符编码设定
 7     mysql_query("set names utf8");
 8     $list = array();
 9     // 判定请求的ID是不是省级请求，如果是，则执行sql数据库查询，调用对应的省级区域下面的城市
10     if(isset($_REQUEST['province_id'])){
11         $sql = "select * from ecs_region where parent_id=".$_REQUEST['province_id'];
12         $res = mysql_query($sql);
13         while( $row= mysql_fetch_assoc($res)){
14             array_push($list,$row);
15         };
16         // 将获取的数据转换成json 格式
17         echo json_encode($list);
18     // 判定请求的ID是不是城市级请求，如果是，则执行sql数据库查询，调用对应的城市区域下面的区县
19     }else if(isset($_REQUEST['city_id'])){
20         $sql = "select * from ecs_region where parent_id=".$_REQUEST['city_id'];
21         $res = mysql_query($sql);
22         while($row=mysql_fetch_assoc($res)){
23             array_push($list,$row);
24         }
25         // 将获取的数据转换成json 格式
26         echo json_encode($list);
27     };
28 ?>

2. 使用$.get() 方法写请求文件：jquery_get_sanji.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>
    <script>
     $(function(){
        var Osheng = $("#province");
        Osheng.on("change",function(){
            var Id = $(this).val();
            var url = "server_jquery.php";
            $.get(url,{"province_id":Id},function(res){
                var obj = JSON.parse(res);
                var city = '';
                var OCity = $("#city");
                city = "<option value='0'>请选择城市</option>";
                for(var i in obj){
                    city += "<option value='" + obj[i].region_id + "'>"+ obj[i].region_name + "</option>" ;
                };
                OCity.html( city );
            });
        });
        var Ochengshi = $("#city");
        Ochengshi.on('change',function(){
            var Id = $(this).val();
            var url = "server_jquery.php";
            $.get(url,{"city_id":Id},function(res){
                var obj = JSON.parse(res);
                var district = '';
                var Odistrict = $("#district");
                district = "<option value='0'>请选择区域</option>";
                for(var i in obj){
                    district += "<option value='"+ obj[i].region_id +"'>" + obj[i].region_name + "</option>";
                };
                Odistrict.html(district);
            });
        });
    });
    </script>
   
</head>
<body>
    <?php 
        mysql_connect("localhost","root","root") or die(mysql_error());
        mysql_select_db("ajax_demo");
        mysql_query("set names utf8");
    ?>
    <select name="province" id="province">
        <option value="0">请选择省份</option>
        <?php
        $sql = "select * from ecs_region where parent_id=1";
        $res = mysql_query($sql);
        while($row=mysql_fetch_assoc($res)){
        ?>
        <option value="<?php echo $row['region_id'];?>"><?php echo $row['region_name']; ?></option> 
        <?php 
        }
        ?>
    </select>
    <select name="city" id="city">
        <option value="0">请选择城市</option>
    </select>
    <select name="district" id="district">
        <option value="0">请选择区县</option>
    </select>
</body>
</html>

运行结果：

3. 使用$.post()方法写请求文件：只是需要把 get 改成 post 就可以了，服务文件可以共用，因为在服务文件里，接受参数使用的是 $_REQUEST，它可以接受get 方式的数据，也可以接受post方式的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>
    <script>
     $(function(){
        var Osheng = $("#province");
        Osheng.on("change",function(){
            var Id = $(this).val();
            var url = "server_jquery.php";
            $.post(url,{"province_id":Id},function(res){
                var obj = JSON.parse(res);
                var city = '';
                var OCity = $("#city");
                city = "<option value='0'>请选择城市</option>";
                for(var i in obj){
                    city += "<option value='" + obj[i].region_id + "'>"+ obj[i].region_name + "</option>" ;
                };
                OCity.html( city );
            });
        });
        var Ochengshi = $("#city");
        Ochengshi.on('change',function(){
            var Id = $(this).val();
            var url = "server_jquery.php";
            $.post(url,{"city_id":Id},function(res){
                var obj = JSON.parse(res);
                var district = '';
                var Odistrict = $("#district");
                district = "<option value='0'>请选择区域</option>";
                for(var i in obj){
                    district += "<option value='"+ obj[i].region_id +"'>" + obj[i].region_name + "</option>";
                };
                Odistrict.html(district);
            });
        });
    });
    </script>
   
</head>
<body>
    <?php 
        mysql_connect("localhost","root","root") or die(mysql_error());
        mysql_select_db("ajax_demo");
        mysql_query("set names utf8");
    ?>
    <select name="province" id="province">
        <option value="0">请选择省份</option>
        <?php
        $sql = "select * from ecs_region where parent_id=1";
        $res = mysql_query($sql);
        while($row=mysql_fetch_assoc($res)){
        ?>
        <option value="<?php echo $row['region_id'];?>"><?php echo $row['region_name']; ?></option> 
        <?php 
        }
        ?>
    </select>
    <select name="city" id="city">
        <option value="0">请选择城市</option>
    </select>
    <select name="district" id="district">
        <option value="0">请选择区县</option>
    </select>
</body>
</html>

运行结果：

4. 使用$.ajax() 方法请求文件：jquery_ajax_sanji.php

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 8     <title>Document</title>
 9     <script>
10      $(function(){
11         var Osheng = $("#province");
12         Osheng.on("change",function(){
13             var Id = $(this).val();
14             var url = "server_jquery.php";
15             $.ajax({
16                 "url":url,                      // 请求地址
17                 "type":"post",                  // 请求方式
18                 "data":{                        // 请求参数
19                     "province_id":Id,
20                 },
21                 "dataType":"json",              // 数据返回的格式
22                 "success":function(obj){        // 请求成功执行的函数
23                     var city = '';
24                     var OCity = $("#city");
25                     city = "<option value='0'>请选择城市</option>";
26                     for(var i in obj){
27                         city += "<option value='" + obj[i].region_id + "'>"+ obj[i].region_name + "</option>" ;
28                     };
29                     OCity.html( city );
30                 }
31             })
32         });
33         var Ochengshi = $("#city");
34         Ochengshi.on('change',function(){
35             var Id = $(this).val();
36             var url = "server_jquery.php";
37                 $.ajax({
38                     "url":url,                   // 请求地址
39                     "type":"post",               // 请求方式
40                     "data":{                     // 请求参数
41                         "city_id":Id,
42                     },
43                     "dataType":"json",           // 数据返回的格式
44                     "success": function(obj){    // 请求成功执行的函数
45                         var district = '';
46                         var Odistrict = $("#district");
47                         district = "<option value='0'>请选择区域</option>";
48                         for(var i in obj){
49                             district += "<option value='"+ obj[i].region_id +"'>" + obj[i].region_name + "</option>";
50                         };
51                         Odistrict.html(district);
52                     }
53                 });
54         });
55     });
56     </script>
57    
58 </head>
59 <body>
60     <?php 
61         mysql_connect("localhost","root","root") or die(mysql_error());
62         mysql_select_db("ajax_demo");
63         mysql_query("set names utf8");
64     ?>
65     <select name="province" id="province">
66         <option value="0">请选择省份</option>
67         <?php
68         $sql = "select * from ecs_region where parent_id=1";
69         $res = mysql_query($sql);
70         while($row=mysql_fetch_assoc($res)){
71         ?>
72         <option value="<?php echo $row['region_id'];?>"><?php echo $row['region_name']; ?></option> 
73         <?php 
74         }
75         ?>
76     </select>
77     <select name="city" id="city">
78         <option value="0">请选择城市</option>
79     </select>
80     <select name="district" id="district">
81         <option value="0">请选择区县</option>
82     </select>
83 </body>
84 </html>

运行结果：

在jquery ajax请求中，$.get(),$.post()都是$.ajax()方法的简写，这两种方式都可以使用ajax方法进行替换。$.ajax()请求提供的参数更多，更加全面

posted on 2018-01-12 11:18 huanying2015 阅读(388) 评论(0) 编辑收藏举报