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. C# SqlBulkCopy类批量导入数据

    特别注意  sqlbulkcopy.ColumnMappings.Add(dt.Columns[i].ColumnName, dt.Columns[i].ColumnName); 插入的时候列的顺序可 ...

  2. swift - 全屏pop手势

    UINavigationController系统自带有侧滑手势,但是这个手势第一点只能边缘侧滑才可以有效,第二点当手动隐藏系统的导航时,这个手势就不能生效了 为了能到达到全屏pop的效果这里有2中解决 ...

  3. webview长按保存图片

    private String imgurl = ""; /***     * 功能:长按图片保存到手机     */    @Override    public void onC ...

  4. 请描述Java中的时间监听机制？

    1.时间监听涉及到三个组件:事件源.事件对象.事件监听器 2.当事件源上发生某个动作时,它会调用事件监听器的一个方法,并将事件对象穿进去,开发人员在监听器中通过事件对象,拿到事件源,从而对事件源进行操 ...

  5. 【文献阅读】Deep Residual Learning for Image Recognition--CVPR--2016

    最近准备用Resnet来解决问题,于是重读Resnet的paper <Deep Residual Learning for Image Recognition>, 这是何恺明在2016-C ...

  6. keil中使用Astyle格式化你的代码的方法2篇合

    关于Astyle Astyle 的全称是Artistic Style的简称,是一个开源的源代码格式化工具,可以对C,C++,C#以及Java等编程语言的源代码进行缩进.格式化.美化.Home Page ...

  7. WPF 员工卡条形码

    大家都知道条形码(Barcode)是一种可以由机器识别的特殊编码,在生产.生活中也常常会见到并使用它.条形码的类型和种类很多感兴趣的朋友可以详细了解一下.其中Code 39 可以说是一种最为常见并广泛 ...

  8. 如何通过js处理相同时间的信息整合到一起的问题

    背景: 倘若后台已经处理好了时间,也就是 今天,昨天,显示具体日期,那么通过js如何写才能调整成如下形式呢? 今天: 第一条数据 第二条数据 昨天: 第一条数据 第二条数据 具体时间: 第一条数据 第 ...

  9. spring工作原理理解

    spring的工作原理 spring是作为一个容器存在的框架,可以加载spring web,spring mvc,spring orm,sprong aop,spring dao等框架和模块,其主要核 ...

  10. EL 表达式 函数 操作 字符串

    <%@tablib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> ${fn ...