php+js+ajax+mysql实现省市三级联动

2024-06-21 11:08

本文主要是介绍php+js+ajax+mysql实现省市三级联动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

php+js+ajax+mysql实现省市三级联动

效果如下图:


思路:先获取所选省的市或者是所选时的县,将获取的数据转换为jason格式的字符串返回到ajax客户端,在客户端使用eval将jason格式的字符串转化为对象,将对象的每个元素值创建成文本节点,并创建option节点,将文本节点追加到option节点,在将option的节点追加给select节点。


ajax-area-select.html


<!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+mysl 实现三级联动(省市县)</title>
<script src="Scripts/ajaxUtil.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
//定义全局变量objectId用来保存select的onchange事件调用的函数传过来的值(sheng,shi,xian),一边以后调用select对象用var objectId="";//定义函数,获取数据库的省份数据function getArea(id,objid){objectId=objid;//每次往select节点写入option前先将原有的option节点清掉(关于这个节点删除,还有更简单的方法在我其他文章有)var sel2=document.getElementById(objid);var childS=sel2.childNodes;for(var i=childS.length-1;i>=0;i--){//alert(childS.length);sel2.removeChild(childS[i]);}//定义urlvar url="ajax-youku-server.php";//定义参数var params="id="+id;//调用ajax 进行交互get(url,params,processData);  }//处理服务器端返回的数据并且显示
function processData(xhr){//将服务器端返回的jason格式的字符串转化为对象var obj=eval("("+xhr.responseText+")");//获取对应objectId(sheng,shi,xian)变量的下拉菜单的对象
var sel1=document.getElementById(objectId);
//创建option节点
var op1=document.createElement("option");//给option加上value属性并赋值为0op1.setAttribute("value",0);    //创建文本节点textvar text=document.createTextNode("----请选择----");//将文本节点追加给op1op1.appendChild(text);//将op1追加给sel1sel1.appendChild(op1);
//在此将jason数组对象的下表为id的作为option的value值,将下表为name的值作为文本节点追加给
for(var i=0;i<obj.length;i++){var op1=document.createElement("option");//alert(obj[i].id);op1.setAttribute("value",obj[i].id);    //创建文本节点textvar text=document.createTextNode(obj[i].name);op1.appendChild(text);sel1.appendChild(op1);   //alert(obj[i-1].id+"-"+obj[i-1].name);}}
</script>
</head>
<body οnlοad="getArea('','sheng')">
<div style="border:#006 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>


ajaxUtil.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以下还有问题。//重组URL的值,将请求路径和获取的参数一并传过去//在这Math.random()的防止缓存重复var url=url1+"?"+params+"&r="+Math.random();//alert(url);//打开引擎xhr.open("get",url,true);   //readyState=1//发送请求xhr.send(null);   //readyState=2//监听readyState值的改变,每次改变都会执行下面额函数  xhr.onreadystatechange=function (){//如果等于4,表明交互完毕 ,我们可以取出服务器返回的内容if(xhr.readyState==4){//动态调用方法,为什么说是动态呢?方法的名称是个变量methodNamemethodName(xhr);           }}
}//$$()方法用于方便取出 id="id" 的对象
function $$(id){  return document.getElementById(id);
}

ajax-youku-server.php


<?php
header("Content-Type:text/html;charset=utf-8");
include_once("./conn.php");
//接受客户端传来的数据
$id=$_GET['id'];
//下划线就像我们平时用的*和?,sql的like语句中,使用%和_来代表任意多个字符和一个字符
$sql="select id,name from area where id like '".$id."__'";
//echo $sql;
//查询
$rs=mysql_query($sql);//将查询到的数据封装成jason格式的字符串(在此也可以用php将数组转换为jason格式字符串的函数那样会更简单写)
$opstr="[";
while($rows=mysql_fetch_array($rs)){$opstr.="{id:'".$rows['id']."',name:'".$rows['name']."'},";}$len=strlen($opstr)-1;$opstr=substr($opstr,0,$len);$opstr.="]";echo $opstr;
?>

conn.php


<?php
//建立数据库连接
mysql_connect("localhost","root","");
//选择数据库
mysql_select_db("area");
//设置连接数据库的编码方式
mysql_query("set names utf8");
?>

点击打开链接下载联动的sql文件



这篇关于php+js+ajax+mysql实现省市三级联动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1081058

相关文章

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言:详细操作:步骤一:点击上方的 文件(File),点击&nbmyHIgsp;设置(Setti

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp