主要学习代码：

List.html

    <script type="text/javascript">

        function GetXhr() {

            return new XMLHttpRequest();

        }

        var getCities = function () {

            //alert(this.options[this.selectedIndex].value);

            //清空列表

            var cities = document.getElementById("sltCity");

            cities.options.length = 0;

            var id = this.options[this.selectedIndex].value;

            var xhr = GetXhr();

            xhr.open("post", "List.ashx", true);

            //post方式添加

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

            //post方式永远不会使用浏览器的缓存

            //设置不使用浏览器缓存

            //xhr.setRequestHeader("If-Modified-Since", "0");

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    var json = eval(xhr.response);

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

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

                        node.innerHTML=json[i].Name;

                        cities.appendChild(node);

                    }

                }

            };

            xhr.send("pId=" + id);

        };

        function getProvinces() {

            //创建异步请求对象

            var xhr = GetXhr();

            // alert(xhr.readyState);//0

            //设置参数

            xhr.open("get", "List.ashx", true);

            // alert(xhr.readyState);//1

            xhr.onreadystatechange = function () {

                // alert(xhr.readyState);//4

                if (xhr.readyState == 4) {

                    if (xhr.status == 200) {

                        // var s = [{ id: 1, name: 'value' }];

                        var cont = eval(xhr.responseText);

                        // alert(cont[0]);

                        //alert(cont.length);

                        var slt = document.getElementById("sltProvince");

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

                            slt.options[i] = new Option(cont[i].Name, cont[i].ID);

                        }

                    } else {

                        alert("服务器繁忙，请稍后在试。");

                    }

                }

            };

            //alert(xhr.readyState);//1

            //发送请求

            xhr.send();//post方式填写参数

            //alert(xhr.readyState);//1

        };

        window.onload = function () {

            getProvinces();

            document.getElementById("sltProvince").onchange = getCities;

        };

    </script>

</head>

<body>

    省：

    <select id="sltProvince">

    </select>

    &nbsp;市：<select id="sltCity">

    </select>

</body>

List.ashx:

<%@ WebHandler Language="C#" Class="List" %>

using System;

using System.Web;

using System.Collections.Generic;//List
//序列化命名空间

using System.Web.Script.Serialization;

public class List : IHttpHandler

{

    private Web.BLL.Transfer transfer = null;

    private List<Web.Model.PC> lpc = null;

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/html";

        string id = context.Request.Form["pId"];

        if (!string.IsNullOrEmpty(id))

        {

            //第二种方式

            //市

            transfer = new Web.BLL.Transfer();

            JavaScriptSerializer serializer = new JavaScriptSerializer();

            lpc = transfer.GetProvincesOrCities(int.Parse(id));

            //这样返回的json自动以属性为键。

            //[{"Name":"白城市","Id":94},

            string json = serializer.Serialize(lpc);

            context.Response.Write(json);

        }

        else

        {

            //第一种方式

            //省

            transfer = new Web.BLL.Transfer();

            lpc = transfer.GetProvincesOrCities(0);

            System.Text.StringBuilder sb = new System.Text.StringBuilder(500);

            //拼接json字符串

            sb.Append("[");

            foreach (Web.Model.PC item in lpc)

            {

                sb.Append("{ID:" + item.Id + ",Name:'" + item.Name + "'},");

            }

            sb.Remove(sb.Length - 1, 1).Append("]");

            context.Response.Write(sb.ToString());

        }

    }

Web.BAL

    public class DataAction

    {

        private List<Web.Model.PC> lpc = null;

        private Web.Model.PC pc = null;

        public DataAction()

        {

            lpc = new List<Web.Model.PC>();

        }

        public List<Web.Model.PC> GetProvincesOrCities(int pId)

        {

            string sql = "select * from TblArea where AreaPId={0}";

            sql = string.Format(sql, pId);

            System.Data.DataTable dt = SqlHelper.ExecuteDataTable(sql);

            if (dt.Rows.Count > )

            {

                foreach (System.Data.DataRow item in dt.Rows)

                {

                    pc = new Web.Model.PC(int.Parse(item[].ToString()), item[].ToString());

                    lpc.Add(pc);

                }

            }

            return lpc;

        }

    }

项目文件：http://pan.baidu.com/s/1hq9Ro7E

省市联动初探AJAX操作数据的更多相关文章

  1. AJAX案例四：省市联动

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

  2. Ajax省市联动

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

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

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

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

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

  5. ajax做省市联动

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

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

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

  7. ajax经典案例--省市联动

    ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...

  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. Machine Learning in Action -- 回归

    机器学习问题分为分类和回归问题 回归问题,就是预测连续型数值,而不像分类问题,是预测离散的类别 至于这类问题为何称为回归regression,应该就是约定俗成,你也解释不通 比如为何logistic ...

  2. [qemu] 挂载qcow2文件，qcow2里边还有个lvm

    环境:archlinux 背景:在虚拟机里玩dpdk,把挂载HugePage(hugetlbfs)的命令写入fstab的时候,写错了,无法启动,需要把qcow2挂起来改一下. 方法:使用qemu-nb ...

  3. 在使用EFCodeFirst中出现类型“System.Data.Objects.ObjectContext”在未被引用的程序集中定义的解决方案

    我安装了EF4.1版本,并在一个项目中映射一个数据库并生成了EF的MODEL实体层 测试:在Default.aspx页面上加了个GridView控件,后台进行绑定 using System; usin ...

  4. FW Docker为容器分配指定物理网段的静态IP

    官方有关于网桥和IP配置的文档地址:https://docs.docker.com/articles/networking/ 1.宿主机(系统采用ubuntu-14.04.1-server-amd64 ...

  5. C# IO操作,写入文本到txt文件.

    /// <summary> /// 写入日志文件 /// </summary> /// <param name="input"></par ...

  6. js 判断js函数、变量是否存在

    //是否存在指定函数 function isExitsFunction(funcName) { try { if (typeof(eval(funcName)) == "function&q ...

  7. copy构造函数的秘密

    1.先来看这段代码: MyString::MyString(){ this->mstr = NULL;} MyString::MyString(MyString &str){ //用一个 ...

  8. c#中如何将一个string数组转换为int数组

    举个例子. string[] strArray = "a,b,c,d,e,f,g".Split(new char[]{ ',' }); int[] intArray; //C# 3 ...

  9. asp.net操作xml

    下面是xml文档内容: <content width="368" height="450" bgcolor="cccccc" load ...

  10. 【转】Android Paint之 setXfermode PorterDuffXfermode 讲解

    [置顶] Android Paint之 setXfermode PorterDuffXfermode 讲解 分类: android动效篇2015-04-07 17:23 978人阅读 评论(8) 收藏 ...