主要学习代码：

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. 浏览器指纹 - HTTP cookie

    http://www.iefans.net/ruhe-fangfan-xielu-shangwang-yinsi/ http://www.iefans.net/cookie-yinsi-guanxi/ ...

  2. Machine Learning in Action -- 回归

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

  3. MyEclipse 使用快捷键

    将光标移到文档末尾,ctrl+end将光标移到文档首,ctrl+home行首,home行尾,end.

  4. crucible3.x +fisheye3.x 安装和破解

    2015-11-24 22:29 423人阅读 评论(1) 收藏 举报  分类: linux(1)  版权声明:本文为博主原创文章,未经博主允许不得转载. 破解文件下载路径:http://downlo ...

  5. js解析Json字符串的方法

      要把一个xml字符串转(“1,2,3,4,5,6,7,8,1,2”)换成数组的形式,每个值都应该是number类型的,想当然的就用了split方法,结果...问题来了,服务器要求数组的值是数字,而 ...

  6. QObject::deleteLater()并没有将对象立即销毁，而是向主消息循环发送了一个event，下一次主消息循环收到这个event之后才会销毁对象 good

    程序编译运行过程很顺利,测试的时候也没发现什么问题.但后来我随手上传了一个1G大小的文件,发现每次文件上传到70%左右的时候程序就崩溃了,小文件就没这个问题.急忙打开任务管理器,这才发现上传文件的时候 ...

  7. 设计模式：简单工厂(Simple Factory)

    定义:根据提供的数据或参数返回几种可能类中的一种. 示例:实现计算器功能,要求输入两个数和运算符号,得到结果. 结构图: HTML: <html xmlns="http://www.w ...

  8. HttpPost发送Json

    1.public static JSONObject post(String url,JSONObject json){ 2. HttpClient client = new DefaultHttpC ...

  9. Magento Table Rate运费国家代码汇总

    Magento Table Rate是三种内置未调用第三方API运费方式中最强大的一个.通过设置国家,区域,邮编,价格来划分不同的运费等级.该方式基本能够满足轻量级的B2C商城的运费模式.这里收集下国 ...

  10. Barricade---hdu5889（最短路+网络流）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5889 题意:有n个点m条边,每条边的长度相同,我们可以默认为1,构成一个无向图:现在起点为1,终点为n ...