ajax练习习题二三级联动
Posted 。。小兵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax练习习题二三级联动相关的知识，希望对你有一定的参考价值。
异步执行
1数据传输收发数据的时候不用等待对方接受，可以继续发送
2Ajax 在调用处理页面处理数据的时候，下面的代码可以继续执行，效率高
同步执行
1收发数据的时候要等到对方接受的成功，才可以继续发送下一个
2ajax 在调用处理页面数据的时候，下面的代码不能执行，只有当ajax完全执行完之后，才能继续执行下面代码
Async ：false 关闭异步，开启同步
显示页面
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="../../popwindow/jquery-1.11.2.min.js"></script> </head> <body> <div id="sanji"></div> </body> <script type="text/javascript"> $(document).ready(function(e) { //创建表单 var zhuti="<select size=\'1\' id=\'sheng\'></select><select size=\'1\' id=\'shi\'></select><select size=\'1\' id=\'qu\'></select>"; $("#sanji").html(zhuti); //填充sheng FillSheng(); //填充shi FillShi(); //填充qu Fillqu(); //当选中省变化的时候去填充市和区 $("#sheng").change(function(e) { //填充shi FillShi(); //填充qu Fillqu(); }); //当市选中的时候去选中区 $("#shi").change(function(e) { //填充qu Fillqu(); }); }); function FillSheng() { var pcode="0001";//省的父级代号 //调用ajax $.ajax({ async:false,//关闭同步开启同步关闭异步 url:"chuli.php", type:"POST", dataType:"text" , data:{pcode:pcode}, success: function(data) { //拆分返回的字符串，得到的行的数组 var hang=data.trim().split("|"); var str=""; for(var i=0; i<hang.length;i++) { var lie= hang[i].split("^"); str=str+"<option value=\'"+lie[0]+"\'>"+lie[1]+"</option>"; } $("#sheng").html(str); } }); } function FillShi() { var pcode=$("#sheng").val(); //市的父级代号 //调用ajax $.ajax({ async:false,//开启同步关闭异步 url:"chuli.php", type:"POST", dataType:"text" , data:{pcode:pcode}, success: function(data) { //拆分返回的字符串，得到的行的数组 var hang=data.trim().split("|"); var str=""; for(var i=0; i<hang.length;i++) { var lie= hang[i].split("^"); str=str+"<option value=\'"+lie[0]+"\'>"+lie[1]+"</option>"; } $("#shi").html(str); } }); } function Fillqu() { var pcode=$("#shi").val();//市的父级代号 //调用ajax $.ajax({ async:false,//关闭同步开启同步关闭异步 url:"chuli.php", type:"POST", dataType:"text" , data:{pcode:pcode}, success: function(data) { //拆分返回的字符串，得到的行的数组 var hang=data.trim().split("|"); var str=""; for(var i=0; i<hang.length;i++) { var lie= hang[i].split("^"); str=str+"<option value=\'"+lie[0]+"\'>"+lie[1]+"</option>"; } $("#qu").html(str); } }); } </script> </html>
处理页面
<?php //接受父级代号 $pcode=$_POST["pcode"]; include ("../DBDA.class.php"); $db=new DBDA(); //根据父代号查询 $sql="select * from chinastates where parentareacode=\'{$pcode}\'"; echo $db->StrQuery($sql);
封装类
<?php class DBDA { public $host="localhost"; //服务器地址 public $uid="root"; //用户名 public $pwd=""; //密码 public $dbconnect; //连接对象 //操作数据库的方法 //$sql代表需要执行的SQL语句 //$type代表SQL语句的类型，1代表查询，2代表增删改 //$dbname代表要操作的数据库名称 //如果是查询，返回二维数组 //如果是增删改，返回true或false /*ajax text 返回类型*/ public function StrQuery($sql,$type=2,$dbname="1") { //造连接对象 $this->dbconnect= new mysqli($this->host,$this->uid,$this->pwd,$dbname); if (!mysqli_connect_error()) { //如果连接成功，执行sql语句 $result = $this->dbconnect->query($sql); //根据语句判断 if($type==2) { $attr=$result->fetch_all(); $str=""; //如果是查询语句返回字符串 for($i=0;$i<count($attr);$i++) { for($j=0;$j<count($attr[$i]);$j++) { $str = $str.$attr[$i][$j]; $str = $str."^"; } $str = substr($str,0,strlen($str)-1); $str = $str."|"; } $str = substr($str,0,strlen($str)-1); return $str; } else { //如果是其他语句,返回true或false if($result){ return "OK"; }else{ return "NO"; } } } else { return "连接失败"; } } }
以上是关于ajax练习习题二三级联动的主要内容，如果未能解决你的问题，请参考以下文章