加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

运用ajax技术写联动的效果

发布时间:2020-12-16 00:35:16 所属栏目:百科 来源:网络整理
导读:客服端的页面代码: ?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(); whil

客服端的页面代码:


<?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>
&nbsp;&nbsp;


<selectid="city"name="city"onchange="change('city')">
<option>请选择市...</option>
</select>
&nbsp;&nbsp;
<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);

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读