jquery_ajax 地址三级联动

2022-09-24 22:34:30

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

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

 <?php

     // 服务器连接

     mysql_connect("localhost","root","root") or die(mysql_error());

     // 数据库选定

     mysql_select_db("ajax_demo");

     // 字符编码设定

     mysql_query("set names utf8");

     $list = array();

     // 判定请求的ID是不是省级请求，如果是，则执行sql数据库查询，调用对应的省级区域下面的城市

     if(isset($_REQUEST['province_id'])){

         $sql = "select * from ecs_region where parent_id=".$_REQUEST['province_id'];

         $res = mysql_query($sql);

         while( $row= mysql_fetch_assoc($res)){

             array_push($list,$row);

         };

         // 将获取的数据转换成json 格式

         echo json_encode($list);

     // 判定请求的ID是不是城市级请求，如果是，则执行sql数据库查询，调用对应的城市区域下面的区县

     }else if(isset($_REQUEST['city_id'])){

         $sql = "select * from ecs_region where parent_id=".$_REQUEST['city_id'];

         $res = mysql_query($sql);

         while($row=mysql_fetch_assoc($res)){

             array_push($list,$row);

         }

         // 将获取的数据转换成json 格式

         echo json_encode($list);

     };

 ?>

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

 <!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";

             $.ajax({

                 "url":url,                      // 请求地址

                 "type":"post",                  // 请求方式

                 "data":{                        // 请求参数

                     "province_id":Id,

                 },

                 "dataType":"json",              // 数据返回的格式

                 "success":function(obj){        // 请求成功执行的函数

                     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";

                 $.ajax({

                     "url":url,                   // 请求地址

                     "type":"post",               // 请求方式

                     "data":{                     // 请求参数

                         "city_id":Id,

                     },

                     "dataType":"json",           // 数据返回的格式

                     "success": function(obj){    // 请求成功执行的函数

                         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>

运行结果：

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

码农公寓

相关文章