客服端的页面代码:
<?php $conn=mysql_connect("localhost","root",'root'); if($conn){ $sql="useprivince"; mysql_query($sql); $sql="setnamesutf8"; mysql_query($sql); $sql="select*fromprivince"; $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> <metahttp-equiv="content-type"content="text/html;charset=utf-8"/> <scripttype="text/javascript"> varxhr=""; functiongetXhr(){ if(XMLHttpRequest){ xhr=newXMLHttpRequest(); }else{ xhr=newActiveXObject("Microsoft.XMLHTTP"); }
} functionchuli(){ if(xhr.readyState==4){ if(xhr.status==200){ varres=eval("("+xhr.responseText+")"); if(res[0].action=='privince'){//判断动作,看是创建省,还是市的dom节点
varcity=$('city'); city.length=0; varobj=document.createElement("option"); obj.innerHTML="请选择市..."; city.appendChild(obj); for(vari=1;i<res.length;i++){ varcity_obj=document.createElement("option"); city_obj.value=res[i].city_name; city_obj.innerHTML=res[i].city_name; city.appendChild(city_obj); }
}elseif(res[0].action=='city'){
varcounty=$('county'); county.length=0; varobj=document.createElement("option"); obj.innerHTML="请选择县..."; county.appendChild(obj); for(vari=1;i<res.length;i++){ varcounty_obj=document.createElement("option"); county_obj.value=res[i].county_name; county_obj.innerHTML=res[i].county_name; county.appendChild(county_obj); }
}
} } }
functionchange(obj){ getXhr(); //obj用于判断选择的动作和取得用户的选择值, quyu=$(obj).value;
varuri="privinceContro.php?action="+obj+"&area="+encodeURI(quyu)+"date="+newDate();//这里为了防止在将数据传给控制器的时候出现乱码而出现取数据的错误,而用encondeURI函数转码
xhr.open("get",uri,true); xhr.onreadystatechange=chuli; xhr.send(null);
}
function$(id){ returndocument.getElementById(id); }
</script> </head> <selectid="privince"name="privince"onchange="change('privince')"> <option>请选择省份...</option> <?phpfor($i=0;$i<count($privince_arr);$i++){?> <optionvalue="<?phpecho$privince_arr[$i]['privince_name'];?>"> <?phpecho$privince_arr[$i]['privince_name'];?> </option> <?php}?> </select>
<selectid="city"name="city"onchange="change('city')"> <option>请选择市...</option> </select> <selectid="county"name="county"> <option> 请选择县... </option> </select>
</html>
控制器的代码:
<?php $action=trim($_GET['action']); $quyu=trim($_GET['area']);
$conn=mysql_connect("localhost",'root'); if($conn){ $info=''; $sql="useprivince"; mysql_query($sql); $sql="setnamesutf8"; mysql_query($sql);
if($action=='privince'){ $sql="select*fromcitieswhereprivince_id=(selectprivince_idfromprivincewhereprivince_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; }elseif($action=='city'){
$sql="select*fromcountywherecity_id=(selectcity_idfromcitieswherecity_name='$quyu')"; file_put_contents("D:myenvapachehtdocsajaxlog.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; }
数据库:
createdatabasepricincedefaultcharset=utf8;useprivince;createtableprivince(privince_idintunsignedprimarykeyauto_incrementnotnull,privince_namevarchar(24)notnulldefault'')createtablecities(city_idintunsignedprimarykeyauto_incrementnotnull,city_namevarchar(24)notnulldefault'',privince_idintnotnulldefault'');createtablecounty(county_idintunsignedprimarykeyauto_incrementnotnull,county_namevarchar(24)notnulldefault''city_idintnotnuldefault'');insertintoprivince(privince_name)values('四川省'),('福建省'),('广东省');insertintocities(city_name,privince_id)values('成都市',1),('遂宁市',('泸州市',('福州市',2),('泉州市',('广州市',3),('珠海市',3);insertintocounty(county_name,city_id)values('双流县',('金牛区',('射洪县',('大英县',('泸县',('合江县',3),('仓山区',4),('永泰县',('晋江',5),('石狮',('越秀区',6),('海珠区',('斗门区',7),('香港区',7); (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|