主要学习代码：

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. 图片放大方法、、菜单栏的位置随滚轮移动固定方法、、<a></a>去外层虚线方法：a:focus { outline:none; -moz-outline:none;}；

    图片放大方法一: <style type="text/css">.xt{ width:230px; height:230px;}.tp{ width:230px; he ...

  2. mysql select 练习题

    10. 查询Score表中的最高分的学生学号和课程号.(子查询或者排序) select sno,cno from score where degree  in(select max(degree) f ...

  3. C/C++ 获取汉字拼音首字母

    #include <stdint.h> #include <stdio.h> #include <ctype.h> #include <string.h> ...

  4. Python 时间 日期常见操作

    import datetime,time dtstr = '2014-02-14 21:32:12' a = datetime.datetime.strptime(dtstr, "%Y-%m ...

  5. JS之Array.slice()方法

    1.Array.slice(startIndex,endIndex); 返回由原始数组从startIndex到endIndex-1的元素构成的新数组; startIndex:默认值0,如果startI ...

  6. JS事件分析

    1.注册事件 1.1 使用HTML元素的事件属性 <div id='myDiv' style="width:100px;height:100px;background-color:re ...

  7. c#中的linq二

    c#中的linq二   using System; using System.Collections.Generic; using System.Linq; using System.Text; us ...

  8. 基础-训练营-day1~day5

    基础 大纲  变量:      声明.初始化.使用.命名  数据类型:      int.long.double.boolean.char.String  运算符:      赋值.算术.关系.逻辑  ...

  9. 微信支付开发(2) 静态链接Native支付

    关键字:微信支付 微信支付v3 native支付 统一支付 Native支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv ...

  10. Linux 中的零拷贝技术，第 2 部分

    技术实现 本系列由两篇文章组成,介绍了当前用于 Linux 操作系统上的几种零拷贝技术,简单描述了各种零拷贝技术的实现,以及它们的特点和适用场景.第一部分主要介绍了一些零拷贝技术的相关背景知识,简要概 ...