php+Ajax无刷新三级联动

最新推荐文章于 2021-03-11 10:51:30 发布

Carlos__z

最新推荐文章于 2021-03-11 10:51:30 发布

阅读量576

点赞数

本文链接：https://blog.csdn.net/Carlos__z/article/details/40087827

版权

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>title</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <style type="text/css">
        </style>
        <script type="text/javascript" src="public/public.js">
        </script>
        <script type="text/javascript">
            
            /*
             *页面初始化
             */
            window.onload = function(){
                //展示省的数据
                $.get("category.php", "p_id=" + 1, display_province, "json");
                //省触发onchange时间，展示对应城市数据
                $("province").onchange = create_city;
				//城市触发onchange时间，展示对应区数据
               $("city").onchange = create_qu;
                
            }
            
            /*
             * 省的onchange时间触发函数
             */
            function create_city(){
                //				
                //取得省的id值来判定展示哪个城市
                var index = this.value;
                //清空城市的option
                $("city").length = 1;
				$("qu").length=1;
                $.get("category.php", "p_id=" + index, display_city, "json");
                
             
                
            }
            
            //城市触发onchange事件，展示对应区/县数据
            function create_qu(){
                //取得省的id值来判定展示哪个城市
                var index = this.value;
                //清空城市的option
                $("qu").length = 1;
                $.get("category.php", "p_id=" + index, display_qu, "json");
            }
            
            /*
             *查询省时，返回AJAX状态码4&&status==200的回调函数
             */
            function display_province(msg){
            	//下面注释抽象出来成show_data函数
                //			for(var i=0 in msg){
                //				var op = new Option(msg[i].region_name,msg[i].region_id);
                //				$("province").options.add(op);
                //			}
                show_data("province", msg);
            }
            
            /*
             *查询城市时，返回AJAX状态码4&&status==200的回调函数
             */
            function display_city(msg){
				//下面注释抽象出来成show_data函数
                //			for(var i=0 in msg){
                //				var op = new Option(msg[i].region_name,msg[i].region_id);
                //				$("city").options.add(op);
                //			}
                show_data("city", msg);
                
            }
            
            /*
             *查询区/县城时，返回AJAX状态码4&&status==200的回调函数
             */
            function display_qu(msg){
                show_data("qu", msg);
                
            }
            
            function show_data(id, msg){
				//PHP处理后返回的是JSON对象，遍历
                for (var i = 0 in msg) {
					//创建option对象，option（文本，value值）如option（"北京","2"）,2是数据库的主ID
                    var op = new Option(msg[i].region_name, msg[i].region_id);
					//sele追加option
                    $(id).options.add(op);
                }
            }
        </script>
    </head>
    <body>
        <select id="province">
            <option value="-1">请选择省份</option>
        </select>
        <select id="city">
            <option value="-1">请选择城市</option>
        </select>
        <select id="qu">
            <option value="-1">请选择区/县</option>
        </select>
    </body>
</html>

PHP：

<?php
//得到请求的父id
$p_id = $_GET["p_id"];

//链接数据库
mysql_connect("localhost","root","root");
//设置字符集
mysql_query("set names uft8");
//选择数据库
mysql_select_db("ecshop");
//构造sql语句
$sql = "select * from ecs_region where parent_id='{$p_id}'";
//发送sql语句,结果集
$res = mysql_query($sql);
// 定义数组
$data = array();

//遍历结果集
while ($row =mysql_fetch_assoc($res)){
	$data[]=$row;
}
echo json_encode($data);