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

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

SQL中的外键约束

外键约束用于表示两张表中的指标连接关系。外键约束的作用主要有以下三点: 1.确保子表中的某个字段(外键)只能引用父表中的有效记录2.主表中的列被删除时,子表中的关联列也会被删除3.主表中的列更新时,子表中的关联元素也会被更新 子表中的元素指向主表 以下是一个外键约束的实例展示

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

如何去写一手好SQL

MySQL性能 最大数据量 抛开数据量和并发数,谈性能都是耍流氓。MySQL没有限制单表最大记录数,它取决于操作系统对文件大小的限制。 《阿里巴巴Java开发手册》提出单表行数超过500万行或者单表容量超过2GB,才推荐分库分表。性能由综合因素决定,抛开业务复杂度,影响程度依次是硬件配置、MySQL配置、数据表设计、索引优化。500万这个值仅供参考,并非铁律。 博主曾经操作过超过4亿行数据

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

MySQL数据库宕机,启动不起来,教你一招搞定!

作者介绍:老苏,10余年DBA工作运维经验,擅长Oracle、MySQL、PG、Mongodb数据库运维(如安装迁移,性能优化、故障应急处理等)公众号:老苏畅谈运维欢迎关注本人公众号,更多精彩与您分享。 MySQL数据库宕机,数据页损坏问题,启动不起来,该如何排查和解决,本文将为你说明具体的排查过程。 查看MySQL error日志 查看 MySQL error日志,排查哪个表(表空间

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time