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. macOS 安装安卓模拟器 并用charles抓包

    mac上面安装安卓模拟器并能使用charles抓包软件调研 一.Genymotion 1.先下载Virtua Box虚拟机 https://www.virtualbox.org/wiki/Downlo ...

  2. nginx 的uri、request_uri 区别

    在nginx中有几个关于uri的变量,包括$uri $request_uri $document_uri,下面看一下他们的区别 : $request_uri: /stat.php?id=1585378 ...

  3. 【JMeter4.0学习（五）】JMeter对服务器监控测试脚本开发

    目录: 下载相关JMeter插件 服务器监控测试脚本开发 附:参考相关文档 本文主要来说一下如何通过JMeter插件来监控服务器CPU.内存.磁盘.网络等相关资源. 一.首先,需要下载相关JMeter ...

  4. Binding基础 文摘

    简要 Binding基础 Binding源与路径 列举Binding的源 Binding基础 从Coding中看Binding的基础. 先定义一个Student类: public class Stud ...

  5. 由浅到深理解ROS（1）

    ROS机器人操作系统 ( Robot Operating System 或简称 ROS),可以帮助提高机器人软件的开发效率.ROS能够提供类似传统操作系统的诸多功能,如硬件抽象.底层设备控制.常用功能 ...

  6. 杭电OJ(HDU)-ACMSteps-Chapter Three-《FatMouse&#39; Trade》《今年暑假不AC》《排名》《开门人和关门人》

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2Fpc2luaV92Yw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  7. 【BZOJ4028】[HEOI2015]公约数数列 分块

    [BZOJ4028][HEOI2015]公约数数列 Description 设计一个数据结构. 给定一个正整数数列 a_0, a_1, ..., a_{n - 1},你需要支持以下两种操作: 1. M ...

  8. 【BZOJ3112】[Zjoi2013]防守战线 单纯形法

    [BZOJ3112][Zjoi2013]防守战线 题解:依旧是转化成对偶问题,然后敲板子就行了~ 建完表后发现跟志愿者招募的表正好是相反的,感觉很神奇~ #include <cstdio> ...

  9. C - Common Subsequence

    C - Common Subsequence Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I ...

  10. C++模板类[初步]

    /* * stacktp.h * * Created on: 2014年3月29日 * Author: */ /** * - 模板类的概念,与使用 * -# export template <c ...