AJAX实现省市联动

最新推荐文章于 2022-08-21 09:53:10 发布
最新推荐文章于 2022-08-21 09:53:10 发布
阅读量1k 收藏 1
点赞数
分类专栏： AJAX 文章标签： ajax 省市联动 无刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaobozhu/article/details/47424871
版权

AJAX实现省市联动

       用AJAX来实现一些经典的功能，对于学习它是非常有帮助的，下面通过经典的省市联动功能来感受AJAX无刷新技术带来的魅力。

l        前台页面代码showCities.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>省市联动</title>

<scripttype="text/javascript">

//创建ajax引擎

       functiongetXmlHttpObject(){

              varxmlHttpRequest;

              //不同的浏览器获取对象xmlhttprequest 对象方法不一样

              if(window.ActiveXObject){

                     xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");

              }else{

                     xmlHttpRequest=newXMLHttpRequest();

              }

              returnxmlHttpRequest;

       }

       varmyXmlHttpRequest="";

functiongetCities(){

myXmlHttpRequest=getXmlHttpObject();

if(myXmlHttpRequest){

                     varurl="showCitiesPro.php";//post

                     vardata="province="+$('sheng').value;

myXmlHttpRequest.open("post",url,true);//异步方式

myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//指定回调函数

                     myXmlHttpRequest.onreadystatechange=chuli;

//发送

                     myXmlHttpRequest.send(data);

              }

}

functionchuli(){

              if(myXmlHttpRequest.readyState==4){

                     if(myXmlHttpRequest.status==200){

                            //取出服务器回送的数据

                            varcities=myXmlHttpRequest.responseXML.getElementsByTagName("city");

                            //window.alert(cities.length);

                            //清零，避免了无刷新儿重复叠加

                            $('city').length=0;

                            varmyOption=document.createElement("option");

                            myOption.innerText="--城市--";

                            //添加到

                            $('city').appendChild(myOption);

                            //遍历并取出城市

                            for(vari=0;i<cities.length;i++){

                                   varcity_name=cities[i].childNodes[0].nodeValue;

                                   //创建新的元素option

                                   varmyOption=document.createElement("option");

                                   myOption.value=city_name;

                                   myOption.innerText=city_name;

                                   //添加到

                                   $('city').appendChild(myOption);

                            }

                     }

              }

       }

       //这里我们写一个函数

       function$(id){

              returndocument.getElementById(id);

       }

</script>

</head>

<body>

<select id="sheng"οnchange="getCities();">

   <option value="">---省---</option>

   <option value="zhejiang">浙江</option>

   <option value="jiangsu" >江苏</option>

   <option value="sichuan" >四川</option>

   </select>

   <select id="city">

   <option value="">--城市--</option>

   </select>

    <select id="county">

   <option value="">--县城--</option>

   </select>

</body>

</html>

l        后台php处理代码showCitiesPro.php

<?php

       //服务器端

       //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式

       header("Content-Type:text/xml;charset=utf-8");

       //告诉浏览器不要缓存数据

       header("Cache-Control:no-cache");

       //接收用户的选择的省的名字

       $province=$_POST['province'];

       //下面把数据写入文件，仅用于调试

       file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);

       //到数据库去查询省有那些城市(现在先不到数据库)

       $info="";

       if($province=="zhejiang"){

              $info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";

       }elseif($province=="jiangsu"){

              $info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";

       }

       echo$info;

?>

       上面的例子中用了“先死后活法”的手段，在实际中我们需要从数据库中读取数据，并组织成字符串的形式，然后由后台传给前台，让前台实现动态展示。

xiaobozhu
关注
专栏目录
Ajax实现省市联动效果
11-08
Ajax是一个局部刷新技术，现在已经被广泛使用，其中就包括使用Ajax实现省市联动效果。
用ajax实现省市联动
msj_god_boy的博客
09-04 627
页面： Insert title here function createXMLHttpRequest() { try { return new XMLHttpRequest(); } catch (e) { alert("您的浏览器不支持"); throw e; } } window.onload = function() { //
省市联动ajax
Java学习
11-12 342
省市联动 1、页面 &lt;select name="province"&gt; &lt;option&gt;选择省份&lt;/option&gt; &lt;/select&gt; &lt;select name="city"&gt; &lt;option&gt;选择城市&lt;/option&gt;
Ajax：ajax实现省市联动
dengfengling999的博客
07-23 398
同时还可以关联到县，往表中添加县的相关信息，在ajax13.html中添加市的的change事件发送ajax请求查询市下县的信息。
Ajax——AJAX实现省市联动
weixin_44606952的博客
08-21 1336
利用Ajax实现省市联动的过程很简单，只需要发送两次ajax请求，第一次自动ajax请求，向数据库中读取所有省份的数据，第二次是在省份发生改变的时候发送第二次Ajax请求，向数据库中读取所有的市级地区，将对应的地区显示在选择标签中。
ajax实现省市联动
12-07
【Ajax实现省市联动】是一种常见的前端交互功能，它在用户选择省份时自动更新下拉框中的城市选项，提供无缝的用户体验。这个功能的核心是利用Ajax（异步JavaScript和XML）技术，结合HTML、CSS和JavaScript进行页面...
利用AJAX实现省市联动与无刷新分页功能示例
为了详细掌握如何实现省市联动与无刷新分页，开发者需要深入研究相关的前后端代码，了解其内部的逻辑和实现方式。这不仅涉及到客户端技术栈，还包括了服务器端的编程逻辑。掌握这些知识，对于提升Web应用的用户体验...
基于javaweb和ajax的省市联动实现
12-16
在JavaWeb开发中，"基于Ajax的省市联动实现"是一个常见的功能需求，它允许用户在选择省份时，市的选择项会动态更新，提供相应的下拉选项。这种联动效果提升了用户体验，减少了不必要的页面刷新。实现这一功能的核心...
PHP+原生态ajax实现的省市联动功能详解
10-19
PHP与原生态Ajax结合实现省市联动功能的详细过程涉及到多个层面的知识点，包括前端技术Ajax的原理、使用原生JavaScript进行异步通信的技术细节，以及PHP后端数据处理和响应的机制。下面将按照知识点进行详细解析。 ...
省级联动(使用ajax实现)
weixin_34162401的博客
10-28 153
在博客园学习了很多实用的东西，现在该慢慢开始自己写写博客文章，由于本人水平有限，刚走出校园的小菜鸟，另外，文章在表述和代码方面如有不妥之处，欢迎批评指正。留下你 的脚印，欢迎评论！ 有什么问题，可以互相探讨，希望对各位有所帮助。开始讲东西吧 一个现实城市下拉框的界面 html代码： <table> <tr> ...
jquery ajax实现省市二级联动
07-11
该资源包含了一个使用jquery ajax实现的省市二级联动的简单demo，简单易懂，可以参考博客：http://blog.csdn.net/mockingbirds/article/details/46842327
ajax省市联动
10-18
ajax无刷新二级联动下拉菜单(省市联动)
Ajax实现省市二级联动
10-25
ajax初级入门。 无刷新实现省市2级菜单联动。 代码简单，很容易明白。
省市联动--AJAX版
srnmwj99的博客
12-26 523
业务分析: 1.JSP >省份: <select name="province"> <option>===请选择省份===</option> </select> >城市: <select name="city"> <option>===请选择城市===</option> </select> 2.Servlet 2.1ProvinceServlet...
使用ajax实现省市联动
w5206666的博客
04-22 1257
本次实现省市联动的预期目标为：省份城市工厂数据从数据库导入；当选择省份的时候，从数据库导出省份所对应的全部城市。相应的，点击城市可以导入城市的工厂数据。 下拉框的样式（只做示例，其他样式自己可选择）： 前端HTML代码（使用的bootstrap，截取自己写的部分代码的部分）： <select class="form-control" name="" id="c1"> <option>请选择省份</option> {% for pr
Ajax——省市联动
fandoudou123的专栏
03-13 415
1. 页面       ===请选择省份===         ===请选择城市===     2. ProvinceServlet   * ProvinceServlet：当页面加载完毕后马上请求这个Servlet！     > 它需要加载china.xml文件，把所有的省的名称使用字符串发送给客户端！ 3. 页面的工作   * 获取这个字符串，使用
ajax+php无刷新二级联动下拉菜单(省市联动)源码
02-23 6966
源码打包下载：http://home.nuc.edu.cn/~arcow/upload/select.rar 演示地址：http://home.nuc.edu.cn/~arcow/upload/select/demo.htm ajax.js/** * ajax无刷新二级联动下拉菜单(省市联动) * * @author      arcow arcow@126.com> * @v
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值