运用ajax技术写联动的效果

客服端的页面代码:

<?php
$conn=mysql_connect("localhost","root",'root');
if($conn){
    $sql="use privince";
    mysql_query($sql);
    $sql="set names utf8";
    mysql_query($sql);
    $sql="select * from privince";
    $res=mysql_query($sql);
    $privice_arr=array();
    while($row=mysql_fetch_assoc($res)){
        $privince_arr[]=$row;
    }
    mysql_free_result($res);
    mysql_close($conn);

}else{
die(mysql_error());
exit;
}

?>
<html>
<head>
<title>
    用ajax做省市县的联动的效果
</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
    var xhr="";
    function getXhr(){
        if(XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }

}
    function chuli(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                var res=eval("("+xhr.responseText+")");
                if(res[0].action=='privince'){  //判断动作，看是创建省，还是市的dom节点

var city=$('city');
                    city.length=0;
                    var obj=document.createElement("option");
                        obj.innerHTML="请选择市...";
                        city.appendChild(obj);
                    for(var i=1;i<res.length;i++){
                        var city_obj=document.createElement("option");
                        city_obj.value=res[i].city_name;
                        city_obj.innerHTML=res[i].city_name;
                        city.appendChild(city_obj);
                    }

}else if(res[0].action=='city'){

var county=$('county');
                    county.length=0;
                    var obj=document.createElement("option");
                    obj.innerHTML="请选择县...";
                    county.appendChild(obj);
                    for(var i=1;i<res.length;i++){
                        var county_obj=document.createElement("option");
                        county_obj.value=res[i].county_name;
                        county_obj.innerHTML=res[i].county_name;
                        county.appendChild(county_obj);
                    }

}

}
}
}

function change(obj){
        getXhr();
        //obj用于判断选择的动作和取得用户的选择值，
        quyu=$(obj).value;

var uri="privinceContro.php?action="+obj+"&area="+encodeURI(quyu)+"date="+new Date();//这里为了防止在将数据传给控制器的时候出现乱码而出现取数据的错误，而用encondeURI函数转码

xhr.open("get",uri,true);
xhr.onreadystatechange=chuli;
xhr.send(null);

}

function $(id){
return document.getElementById(id);
}

</script>
</head>
<select id="privince" name="privince" οnchange="change('privince')">
    <option>请选择省份...</option>
<?php for($i=0;$i<count($privince_arr);$i++){  ?>
    <option value="<?php echo $privince_arr[$i]['privince_name']; ?>" >
        <?php echo $privince_arr[$i]['privince_name']; ?>
    </option>
<?php } ?>
</select>
  

</html>

控制器的代码：

<?php
$action=trim($_GET['action']);
$quyu=trim($_GET['area']);

$conn=mysql_connect("localhost","root",'root');
if($conn){
    $info='';
    $sql="use privince";
    mysql_query($sql);
    $sql="set names utf8";
    mysql_query($sql);

if($action=='privince'){
        $sql="select * from cities where privince_id =(select privince_id from privince where privince_name='$quyu')";
        $res=mysql_query($sql);
        $privince_arr=array();
        while($row=mysql_fetch_assoc($res)){
            $privince_arr[]=$row;
        }
        $info.='[{"action":"privince"},';
        for($i=0;$i<count($privince_arr);$i++){
            if($i==count($privince_arr)-1){
                $info.='{"city_name":"'.$privince_arr[$i]['city_name'].'"}]';
            }else{
                $info.='{"city_name":"'.$privince_arr[$i]['city_name'].'"},';
            }
        }
        echo $info;
        exit;
    }else if($action=='city'){

$sql="select * from county where city_id =(select city_id from cities where city_name='$quyu')";
        file_put_contents("D:\myenv\apache\htdocs\ajax\log.txt",$sql,FILE_APPEND);
        $res=mysql_query($sql);
        $privince_arr=array();
        while($row=mysql_fetch_assoc($res)){
            $privince_arr[]=$row;
        }
        $info.='[{"action":"city"},';    //给客服端发送动作的类型
        for($i=0;$i<count($privince_arr);$i++){
            if($i==count($privince_arr)-1){
                $info.='{"county_name":"'.$privince_arr[$i]['county_name'].'"}]';
            }else{
                $info.='{"county_name":"'.$privince_arr[$i]['county_name'].'"},';
            }
        }
        echo $info;
        exit;
    }
}else{
    die(mysql_error());
    exit;
}

数据库：

create database pricince default charset=utf8;

use privince;

create table privince(
privince_id int unsigned primary key auto_increment not null,
privince_name varchar(24) not null default ''

)

create table cities(
    city_id int unsigned primary key auto_increment not null,
    city_name varchar(24) not null default '',
    privince_id int not null default ''
);

create table county(
    county_id int unsigned primary key auto_increment not null,
    county_name varchar(24) not null default ''
    city_id int not nul default ''
);

insert into privince (privince_name) values('四川省'),('福建省'),('广东省');
insert into cities (city_name,privince_id) values
('成都市',1),
('遂宁市',1),
('泸州市',1),
('福州市',2),
('泉州市',2),
('广州市',3),
('珠海市',3);

insert into county (county_name,city_id) values
('双流县',1),
('金牛区',1),
('射洪县',2),
('大英县',2),
('泸县',3),
('合江县',3)，
('仓山区',4),
('永泰县',4),
('晋江',5),
('石狮',5),
('越秀区',6),
('海珠区',6),
('斗门区',7),
('香港区',7);

转载于:https://blog.51cto.com/chenyongjun/1403471

运用ajax技术写联动的效果相关推荐

java笔记：自己动手写javaEE框架（七）--使用JSON和Ajax技术
今天我要将json和ajax引入到我所写的框架,不过今天用到的技术有部分不是我框架最终使用到的技术,比如ajax技术,我用到的是最为原始的ajax技术,这次算是对老技术的回顾,不过不管技术如何演进,对 ...
Demo：充分利用 Ajax 技术来体现页面局部刷新效果（获取天气预报情况）
天气预报读取,充分利用了Ajax技术来体现页面无刷新. 如果想获取源码,进一步学习和交流,可以回复,留下你的Email. 1. 2 3 <link href="Style/ ...
如何使用Ajax技术开发Web应用程序(2)
在上一篇文章中,我们讨论了如何通过javascript从一个远程XML文件中取得数据.在这篇文章中,我们将学会怎样对数据作更复杂的处理.作为一个示例,我们会准备一组XML数据,将数据分割成独立的片断并 ...
Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生
最近开始学习Asp.net中的AJAX,可能我的高手朋友们会说:"走还不稳呢!怎么就想学跑了?"呵呵!主要是我在做项目中体会到AJAX真的是很好的一门技术,应该好好的学习一下, ...
Java Web - Ajax技术
一为什么会有Ajax技术的出现想必大家肯定用过百度,当我们在百度的搜索框中输入文字的时候,下面就会自动出现你可能希望搜索的内容,但是页面中的其他内容都没有变化: 可以想象,这些内容都是根据在输入框 ...
ajax结合java,ajax技术应用详细分析（后端java与客户端请求的结合）
Ajax 技术应用先回看模态框的使用 js比较薄弱如上比如这部分加粗样式如下是BOM窗口对象 ** js最薄弱建议在浏览器练习 ** confirm方法跳转练习新疑问:怎么分辨js ...
XMLHttpRequest对象AJAX技术的基本使用
AJAX技术文章目录 AJAX技术 Ajax技术的诞生一.Ajax的概念? 二.XMLHttpRequest对象的概念 1.XMLHttpRequest对象的属性 2.XMLHttpRequest ...
php js 二级联动_PHP+ajax实现二级联动菜单功能示例
本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动工作原理二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于 ...
AJAX技术入门基础
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. A ...

运用ajax技术写联动的效果

运用ajax技术写联动的效果相关推荐

最新文章

热门文章