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. cxf + spring + maven 开发webservice

    1.maven 配置 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...

  2. 【LeetCode-面试算法经典-Java实现】【114-Flatten Binary Tree to Linked List（二叉树转单链表）】

    [114-Flatten Binary Tree to Linked List(二叉树转单链表)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a bin ...

  3. bg、fg、nohup

    1.bg 执行如下命令: tail -f log.txt 此时程序是在前台运行的,将程序放到后台执行,按ctrl+z,执行结果如下: []+ Stopped tail -f log.txt 执行bg命 ...

  4. 【C#学习笔记】之用button使得textbox中数字的值增减

    代码段: string t = ""; t = mv.textBox2.Text; int n = int.Parse(t); n = n + 1; mv.textBox2.Tex ...

  5. Java并发基础：了解无锁CAS就从源码分析

    https://segmentfault.com/a/1190000015881923

  6. 文件大小转换（b,kb,M,GB/TB）

    //转换单位 setupSize(1111111111111); function setupSize($fileSize) { $size = sprintf("%u", $fi ...

  7. Unity合并选中物体的Mesh

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEditor; pu ...

  8. Java是否存在内存泄露

    会的. 原因:长生命周期的对象持有短生命周期对象的引用,导致短生命周期对象不能被回收,由此可能发生内存泄露. 举例参考:http://blog.csdn.net/yakihappy/article/d ...

  9. R语言数据分析系列之四

    R语言数据分析系列之四 -- by comaple.zhang 说到统计分析我们就离不开随机变量,所谓随机变量就是数学家们为了更好的拟合现实世界的数据而建立的数学模型.有了她我们甚至能够来预測一个站点 ...

  10. python 基础 9.11 更改数据

    #/usr/bin/python #-*- coding:utf-8 -*- #@Time   :2017/11/24 4:45 #@Auther :liuzhenchuan #@File   :更改 ...