主要学习代码：

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. Ubuntu apparmor何方神圣

    AppArmor 是一款与SeLinux类似的安全框架/工具,其主要作用是控制应用程序的各种权限,例如对某个目录/文件的读/写,对网络端口的打开/读/写等等. 来之Novell网站的引用: AppAr ...

  2. SQLServer2008:助您轻松编写T-SQL存储过程（原创）【转】

      本文主要介绍 SQLServerExpress2008不用第三方工具调试T-SQL语句,经过本文的介绍,用SQLSERVER2008 Manage studio 编写.调试T-SQL存储过程都将是 ...

  3. Linux中的ps命令

    Linux中ps命令用来列出系统中当前运行的那些进程. 使用格式:ps 参数   如:ps -A 通过man ps可以获得ps的详细参数用法 -A 显示所有进程信息 c 列出程序时,显示每个程序真正的 ...

  4. Magento: How to reset admin pssword

    Magento: How to reset admin pssword If you forget your admin password for Magento and you can’t reme ...

  5. python和pywin32实现窗口查找、遍历和点击

    Pywin32是一个Python库,为python提供访问Windows API的扩展,提供了齐全的windows常量.接口.线程以及COM机制等等. 1.通过类名和标题查找窗口句柄,并获得窗口位置和 ...

  6. git 项目初始化

    1.在git服务器界面右上角“+” .create  new  project ,写上项目名字生成一个新的组 2.如果机器第一次与git 建立连接,需要让机器生成一个id_rsa和id_rsa.pub ...

  7. [收藏夹整理]VC部分

    c++多线程(一) C++11 多线程 鸡啄米:C++编程入门系列之十二(类与对象:面向对象设计的基本思想和特点) 鸡啄米:C++编程入门系列之二十一(C++程序设计必知:类的静态成员) [笔记]VS ...

  8. 添加 Gradle 依赖与 build.gradle 配置初识

    添加 Gradle 我们可以到我们添加 Maven 依赖的网站 Maven Repository: Search/Browse/Explore http://mvnrepository.com/ 上查 ...

  9. Malformed POM expected START_TAG or END_TAG not TEXT

    I resolved this problem by replacing blank space to tab. 规范些就解决这个问题了!!! 由此可见规范的重要性!

  10. day06-java-（方法，猜字符小游戏）

    day05-java-(方法,猜字符小游戏) 1.方法:  1)用于封装一段特定的逻辑功能  2)方法应尽可能的独立,只干一件事  3)方法可以被反复的调用多次  4)避免代码重复,有利于代码的维护, ...