ajax的省市联动案例

如果我们的代码比较复杂，可以通过file_put_contents来输出信息到某个日志。

在一个元素中添加另一个元素使用的方法是：appendChild()。

函数appendChild()写错是有问题的。不要写错appendChlid()了。

showCities.php

<html>

<head>

<meta http-equiv="content-type"content="text/html;charset=utf-8"/>

<script language="javascript" type="text/javascript">

    //创建ajax引擎

    function getXmlHttpObject(){

        var xmlHttpRequest;

        if(window.ActiveObject){

            xmlHttpRequest=new ActiveObject("Microsoft.XMLHTTP");

        }else{

            xmlHttpRequest=new XMLHttpRequest();

        }

        return xmlHttpRequest;

    }

    var myXmlHttpRequest="";

    function getCities(){

        myXmlHttpRequest=getXmlHttpObject();

        if(myXmlHttpRequest){

            var url="/showCitiesPro.php";//post方式提交

            var data="province="+$("sheng").value;

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

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

            //指定回调函数

            myXmlHttpRequest.onreadystatechange=chuli;

            //发送

            myXmlHttpRequest.send(data);

        }

    }

    function chuli(){

        if(myXmlHttpRequest.readyState==4){

            if(myXmlHttpRequest.status==200){

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

                var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");

                //解决方案是添加如下代码

                $("city").length=0;

                //犯错：$("city").length=0;写出$("city").lenth=0;

                var myOption=document.createElement("option");

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

                //添加到

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

                //解决方案

                //遍历并取出城市

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

                    //这里出现了一个问题，每次点击省份，市的下拉列表中的内容会不断增加（重复),这是因为没有刷新，解决方案：将

                    var city_name=cities[i].childNodes[0].nodeValue;

                    //window.alert(city_name);

                    //创建新的元素option

                    var myOption=document.createElement("option");

                    myOption.value=city_name;

                    myOption.innerText=city_name;

                    //添加到

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

                    //在一个元素中添加另一个元素使用appendChild()；

                }

            }

        }

    }

    function $(id){

        return document.getElementById(id);

    }

</script>

</head>

<body>

    <select id="sheng" onchange="getCities();">

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

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

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

    </select>

    <select id="city">

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

    </select>

    <select id="county">

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

    </select>

</select>

</body>

</html>

showCitiesPro.php

<?php

    //服务器端

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

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

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

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

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

    $province=$_POST['province'];

    //ajax调试很困难

    //如何在调试过程中，看到接收到的数据。

    file_put_contents("D:/install/wamp/www/mylog.log",$province."\r\n",FILE_APPEND);

    //如何在调试过程中，看到接收的数据

    //到数据库去查询省有哪些城市（现在先不到数据库中。)

    $info="";

    if($province=="zhejiang"){

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

    }else if($province=="jiangsu"){

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

    }

    echo $info;

?>

ajax经典案例--省市联动的更多相关文章

  1. js ajax 经典案例

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

  2. AJAX案例四：省市联动

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  3. AJAX应用案例之省市联动

    jsp 主要是要注意多Document的操作 <%-- Created by IntelliJ IDEA. User: YuWenHui Date: 2017/4/23 0023 Time: 1 ...

  4. Ajax省市联动

    以JQuery为JS,写的Ajax省市联动. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  5. html + ashx 实现Ajax省市联动

    基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...

  6. ajax做省市联动

    原理: 当select.jsp页面打开时,向服务器发送异步请求,得到所有省份的名称(文本数据).然后使用每个省份名称创建<option>,添加到<select name=”provi ...

  7. 练习: 省市联动(Ajax)

    // 示例一: china.xml (位于 src 目录下) <?xml version="1.0" encoding="utf-8"?> < ...

  8. JS 省市联动 ajax

    省市联动 //省市联动     $('.locationCode').change(function () {         var val = $(this).val();         if ...

  9. Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

随机推荐

  1. synchronized 锁优化

    synchronized 在jdk 1.7之前是重量级锁,独占锁,非公平锁.jdk1.7之后,synchronized引入了 偏向锁,自旋锁,轻量级锁,重量级锁 自旋锁 当线程在获取锁的时候,如果发现 ...

  2. git 和 svn 的比较

    Git  VS SVN   1 .功能 主体功能 Git SVN 1.从服务器上克隆完整的Git仓库(包括代码和版本信息)到单机上. 1 .SVN是基于关系数据库的(BerkleyDB)或一系列二进制 ...

  3. oracle中nvl()函数

    oracle中nvl()函数  oracle的nvl函数的使用方法 通过查询获得某个字段的合计值,假设这个值位null将给出一个预设的默认值  select nvl(sum(t.dwxhl),1) f ...

  4. 将PHP 5.3.3 (cli)升级到PHP 5.6.31 (cli)

    centos默认系统安装的是php5.3 [root@sz-local1 scripts]# rpm -qa |grep phpphp-pdo-5.3.3-47.el6.x86_64php-mysql ...

  5. （转）linux设备驱动之USB数据传输分析 一

    三:传输过程的实现说到传输过程,我们必须要从URB开始说起,这个结构的就好比是网络子系统中的skb,好比是I/O中的bio.USB系统的信息传输就是打成URB结构,然后再过行传送的.URB的全称叫US ...

  6. A/B测试与灰度发布

    1.A/B测试与灰度发布的理论 产品是多维度的,设计体验.交互体验.系统质量.运营支持等等, 测试的目的是为了系统最终的交付,一套各方面都足够好的系统,而不是文档上定义的系统,系统是需要不断进化的. ...

  7. java服务安装(一)：使用java service wrapper及maven打zip包

    目录(?)[+] 1概述 1_1为什么要用服务形式运行 1_2如何让java程序以服务形式运行 1_3打包需求 2程序示例 3maven打zip包 3_1maven-assembly-plugin介绍 ...

  8. Qt插件开发入门（两种方法：High-Level API接口，Low-Level API接口）

    Qt中为我们提供了两种开发插件的方式.一种是使用High-Level API接口,一种是使用Low-Level API接口.所谓High-Level API 是指通过继承Qt为我们提供的特定的插件基类 ...

  9. 我的Android进阶之旅------>Android视频录制小例子

    ============================首先看看官网上关于视频捕捉的介绍================================ Capturing videos Video ...

  10. Ext部署在本地tomcat下运行例子

    我本地用的ext6+,从官网下载好Ext后解压到D盘,然后打开tomcat的server.xml,在Host标签内配置 <Context path="/ext-6.2.0" ...