主要学习代码：

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. 不遗留问题-menu数据拼装-2

    $res = array(); foreach($idlist_1 as $id1) { $tmp = array(); $tmp1 = array(); $tmp1[] = $id1; foreac ...

  2. 轮询、select、 epoll

    网卡设备对应一个中断号, 当网卡收到网络端的消息的时候会向CPU发起中断请求, 然后CPU处理该请求. 通过驱动程序 进而操作系统得到通知, 系统然后通知epoll, epoll通知用户代码.  一. ...

  3. 浅析在QtWidget中自定义Model

    Qt 4推出了一组新的item view类,它们使用model/view结构来管理数据与表示层的关系.这种结构带来的功能上的分离给了开发人员更大的弹性来定制数据项的表示,它也提供一个标准的model接 ...

  4. PIVOT&UNPIVOT

    如果是家电销售员,那么可能需要统计每月日销售的彩电.冰箱.空调...最大值.最小值.平均值等 如果你是耳鼻喉科医生,那么可能需要统计月度年度日接客咽炎.喉炎.鼻炎...最大值.最小值.平均值等 如果你 ...

  5. 设计模式：组合模式（Composite）

    定   义:将对象组合树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象使用具有一致性. 结构图: Component类: abstract class Component ...

  6. [LeetCode]题解（python）：061-Rotate list

    题目来源 https://leetcode.com/problems/rotate-list/ Given a list, rotate the list to the right by k plac ...

  7. The Best Path---hdu5883（欧拉路径）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5883 题意:n 个点 m 条无向边的图,找一个欧拉通路/回路使得这个路径所有结点的异或值最大. 先判断 ...

  8. ar1020 驱动移植 无效

    移植ar1020的spi驱动.驱动移植过来后,在原来的板子上都能够正常运行,而在新的板子却没有效果. 最后查看新旧板子的AR1020的电路,发现M2引脚连接不同.M2高电平连接的touch是5线的接口 ...

  9. 我的工具箱之Putty

    这是类似于SecureCrt的终端仿真软件,个人感觉比SecureCrt差一点. 下载地址是:http://pan.baidu.com/s/1sko0GrF SecureCrt网址在我的工具箱之Sec ...

  10. Python-S13-day2-之购物车

    Python-S13-day2 需求: 1.写一个购物小程序,用户开始先输入自己的工资,然后可以不断的买东西并加入购物车,如果钱不够了提示余额不足,用户中途可以选择查看自己购物车里面的商品,以及余额, ...