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

相关文章

SQL BETWEEN 的常见用法小结

《SQLBETWEEN的常见用法小结》BETWEEN操作符是SQL中非常有用的工具,它允许你快速选取某个范围内的值,本文给大家介绍SQLBETWEEN的常见用法,感兴趣的朋友一起看看吧... 在SQL中,BETWEEN是一个操作符,用于选取介于两个值之间的数据。它包含这两个边界值。BETWEEN操作符常用

MySQL索引的优化之LIKE模糊查询功能实现

《MySQL索引的优化之LIKE模糊查询功能实现》:本文主要介绍MySQL索引的优化之LIKE模糊查询功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前缀匹配优化二、后缀匹配优化三、中间匹配优化四、覆盖索引优化五、减少查询范围六、避免通配符开头七、使用外部搜索引擎八、分

Python实现特殊字符判断并去掉非字母和数字的特殊字符

《Python实现特殊字符判断并去掉非字母和数字的特殊字符》在Python中,可以通过多种方法来判断字符串中是否包含非字母、数字的特殊字符,并将这些特殊字符去掉,本文为大家整理了一些常用的,希望对大家... 目录1. 使用正则表达式判断字符串中是否包含特殊字符去掉字符串中的特殊字符2. 使用 str.isa

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin

MySql match against工具详细用法

《MySqlmatchagainst工具详细用法》在MySQL中,MATCH……AGAINST是全文索引(Full-Textindex)的查询语法,它允许你对文本进行高效的全文搜素,支持自然语言搜... 目录一、全文索引的基本概念二、创建全文索引三、自然语言搜索四、布尔搜索五、相关性排序六、全文索引的限制七

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi

使用Python实现一个优雅的异步定时器

《使用Python实现一个优雅的异步定时器》在Python中实现定时器功能是一个常见需求,尤其是在需要周期性执行任务的场景下,本文给大家介绍了基于asyncio和threading模块,可扩展的异步定... 目录需求背景代码1. 单例事件循环的实现2. 事件循环的运行与关闭3. 定时器核心逻辑4. 启动与停

基于Python实现读取嵌套压缩包下文件的方法

《基于Python实现读取嵌套压缩包下文件的方法》工作中遇到的问题,需要用Python实现嵌套压缩包下文件读取,本文给大家介绍了详细的解决方法,并有相关的代码示例供大家参考,需要的朋友可以参考下... 目录思路完整代码代码优化思路打开外层zip压缩包并遍历文件:使用with zipfile.ZipFil

Python实现word文档内容智能提取以及合成

《Python实现word文档内容智能提取以及合成》这篇文章主要为大家详细介绍了如何使用Python实现从10个左右的docx文档中抽取内容,再调整语言风格后生成新的文档,感兴趣的小伙伴可以了解一下... 目录核心思路技术路径实现步骤阶段一:准备工作阶段二:内容提取 (python 脚本)阶段三:语言风格调

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel