Java三级联动怎么写 js如何实现三级联动

转载

mob6454cc79cd11 2023-10-30 22:28:28

文章标签 Java三级联动怎么写 javascript 数据库服务器 function 文章分类 Java 后端开发

JavaScript实现省市县三级联动效果的三种方法：

首先，两个公共文件：

dbConn.php:连接数据库
<?php
//建立数据库的连接
mysql_connect("localhost","root","");
//选择数据库
mysql_select_db("csdn_db");
//设置字符编码
mysql_query("set names utf8");
?>
ajaxUtil.js：封装的js
function get(url1,params,methodName){
  /*
 ajax使用的基本步骤：
 1、初始化ajax引擎
 2、封装url（设定要请求的路径）
 3、打开ajax引擎（同步方式、异步的方式；本次传输使用get还是post）
 4、将要请求的信息通过引擎发送到服务器进行处理
 5、监听服务器返回给ajax引擎的处理状态
 6、判断是否交互完毕，如果交互完毕则取出返回的数
  */ 
  //初始化ajax引擎
  var xhr = new XMLHttpRequest();//这种方式只针对ie浏览器，并且ie6以下还有问题。
  var url=url1+"?"+params+"&r="+Math.random();
  //打开引擎
  xhr.open("get",url,true);
  //发送请求
  xhr.send(null); 
  //监听readyState值的改变，每次改变都会执行下面额函数  
  xhr.onreadystatechange=function (){
         //如果等于4，表明交互完毕 ，我们可以取出服务器返回的内容
         if(xhr.readyState==4){   
       //动态调用方法，为什么说是动态呢？方法的名称是个变量methodName
                     methodName(xhr);
         }
  }
}
//$$（）方法用于方便取出 id="id" 的对象
function $$(id){
       return document.getElementById(id);
}
第一种：使用DOM的innerHTML方式实现
客户端文件：
<!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>ajax+dom+php+mysql实现多级联动效果</title>
<script language="javascript" type="text/javascript" src="ajaxUtil.js"></script>
<script language="javascript" type="text/javascript">
       var objectId="";
       //定义函数，获取数据库的省份数据
       function getArea(id,objid){
              objectId=objid;
              //定义url
              var url="ajax-area-select-server.php";
              //alert(url);
              //定义参数
              var params="id="+id;
              //调用ajax进行交互
              get(url,params,processData);
       }     
       //处理服务器端返回的数据库，并且显示
       function processData(xhr){
              //得到交互的数据并且显示出来
              $$(objectId).innerHTML=xhr.responseText;//alert(xhr.responseText);
       }
</script>
</head>
<body οnlοad="getArea('','sheng')">
<div style="border:#00F dashed 1px;">
<select id="sheng" οnchange="getArea(this.value,'shi')"></select> 省
<select id="shi" οnchange="getArea(this.value,'xian')"></select> 市
<select id="xian"></select> 县
</div>
</body>
</html>
服务器端文件：ajax-area-select-server.php：
<?php
header("Content-Type:text/html;charset=utf-8");
//包含数据库连接
include_once "dbConn.php";
//获取客户端传来的数据
$id=$_GET['id'];
//定义sql
$sql="select id,name from area where id like '".$id."__'";
//查询
$rs=mysql_query($sql);
//遍历查询结果，并且拼装html代码
$opstr="<option value='0'>==请选择==</option>";
while($rows=mysql_fetch_assoc($rs)){
       //拼装下拉选项
       $opstr.="<option value='".$rows['id']."'>".$rows['name']."</option>";
}
echo $opstr;
?>
第二种：解析普通文本的方式实现
客户端文件：
<!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 language="javascript" type="text/javascript" src="ajaxUtil.js"></script>
<script language="javascript" type="text/javascript">
       var objectId="";
       //定义函数，获取数据库的省份数据
       function getArea(id,objid){
              objectId=objid;
              //定义url
              var url="ajax-select-text.php";
              //alert(url);
              //定义参数
              var params="id="+id;
              //调用ajax进行交互
              get(url,params,processData);
       }     
       //处理服务器端返回的数据库，并且显示
       function processData(xhr){
              //解析服务器端传回的数据
              var str=xhr.responseText;
              //alert(str);      
              var selectobj=$$(objectId);
              selectobj.options.length=0;
              //1)使用；拆解，确定选项的个数
              var optarr=str.split(";");
              //alert(optarr.length);
              
              //每个元素  id：name
              for(var i=0;i<optarr.length;i++){
                     //2、使用：进行拆分，[0]==id  [1]==name
                     var optstr=optarr[i].split(":");
                     //添加到下拉菜单中   text       value
                     var op=new Option(optstr[1],optstr[0]);
                     //添加选项到下拉菜单中
                     selectobj.options.add(op);
              }
       }
</script>
</head>
<body οnlοad="getArea('','sheng')">
<div style="border:#00F dashed 1px;">
<select id="sheng" οnchange="getArea(this.value,'shi')"></select> 省
<select id="shi" οnchange="getArea(this.value,'xian')"></select> 市
<select id="xian"></select> 县
</div>
</body>
</html>

服务器端文件：ajax-select-text.php

<?php
header("Content-Type:text/html;charset=utf-8");
//包含数据库连接
include_once "dbConn.php";
//获取客户端传来的数据
$id=$_GET['id'];
//定义sql
$sql="select id,name from area where id like '".$id."__'";
//查询
$rs=mysql_query($sql);
//要封装的格式       ；id：name；
$str="0:==请选择==";
while($rows=mysql_fetch_assoc($rs)){
       $str.=";".$rows['id'].":".$rows['name'];
}
echo $str;
?>
第三种：使用json格式实现联动效果
<!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 language="javascript" type="text/javascript" src="ajaxUtil.js"></script>
<script language="javascript" type="text/javascript">
       var objectId="";
       //定义函数，获取数据库的省份数据
       function getArea(id,objid){
              objectId=objid;
              //定义url
              var url="ajax-select-json.php";
              //alert(url);
              //定义参数
              var params="id="+id;
              //调用ajax进行交互
              get(url,params,processData);
       }     
       //处理服务器端返回的数据库，并且显示
       function processData(xhr){
              //解析服务器端传回的数据
              var str=xhr.responseText;
              //alert(str);
              //将json  
              var obj=eval（"("+str+")");
              //获取select对象
              var selectobj=$$(objectId);
              //创建一个option
              //var op=new Option();
              //selectobj.options.add(op);
              //每次清空
              selectobj.options.length=0;
              //添加一个请选择选项
              var op1=new Option("==请选择==",0);
              selectobj.options.add(op1);
              //每个元素  id：name
              for(var i=0;i<obj.length;i++){
                     //添加到下拉菜单中   text       value
                     var op=new Option(obj[i].name,obj[i].id);
                     //添加选项到下拉菜单中
                     selectobj.options.add(op);
              }
       }
</script>
</head>
<body οnlοad="getArea('','sheng')">
<div style="border:#00F dashed 1px;">
<select id="sheng" οnchange="getArea(this.value,'shi')"></select> 省
<select id="shi" οnchange="getArea(this.value,'xian')"></select> 市
<select id="xian"></select> 县
</div>
</body>
</html>

服务器端文件：ajax-select-json.php

<?php
header("Content-Type:text/html;charset=utf-8");
//包含数据库连接
include_once "dbConn.php";
//获取客户端传来的数据
$id=$_GET['id'];
//定义sql
$sql="select id,name from area where id like '".$id."__'";
//查询
$rs=mysql_query($sql);
//要封装json的格式     
while($rows=mysql_fetch_assoc($rs)){
       //将rows的每一个数据都给arr 相当于复制
       $arr[]=$rows;
}
echo json_encode($arr);
?>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。