运用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>
<select?id="city"?name="city"?οnchange="change('city')">
<option>請選擇市...</option>
</select>
<select?id="county"?name="county">
<option>
請選擇縣...
</option>
</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技术写联动的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 服务器带宽问题记录
- 下一篇： 基于BASYS2的VHDL程序——交通灯