使用 AJAX 对全国地名进行选取

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="Jquery/jquery-1.7.1.min.js"></script>

    <style type ="text/css">

        .sele

        {

            width:80px;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <%--三个下拉列表--%>

        <select id="sel1" class="sele"></select>

        <select id="sel2" class ="sele"></select>

        <select id="sel3" class ="sele"></select>

    </form>

</body>

</html>

<script type ="text/javascript" >

    selectlode("");       //执行 a=1

    //写一个加载方法

    function selectlode(a) {  

        if (a == "")

        {

           $.ajax({

                url: "ccc.ashx",

                data: {"areacode":""},

                type: "post",

                dataType: "json",

                success: function (msg) {     //接收 ajax 传出了的数据

                    for (var i= ; i < msg.length; i++)

                    {

                                               //将结果编写成 html 标记语言

                        var v = "<option value=\"" + msg[i].code + "\">" + msg[i].name + "</option>";

                        $("#sel1").append(v);

                    }

                    selectlode("");    // 当1 加载完后再加载2

                },

                error: function () {

                },

                beforeSend: function () {

                    $("#sel1").html("");       // 加载结果时，先将元数据清空

                },

                complete: function () {

                }

            });

        }

        if (a == "")

        {

            $.ajax({

                url: "ccc.ashx",

                data: { "areacode": $("#sel1").val() },

                type: "post",

                dataType: "json",

                success: function (msg) {

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

                        var v = "<option value=\"" + msg[i].code + "\">" + msg[i].name + "</option>";

                        $("#sel2").append(v);

                    }

                    selectlode("");   //加载完2后加载3

                },

                error: function () {

                },

                beforeSend: function () {

                    $("#sel2").html('');

                },

                complete: function () {

                }

            });

        }

        if (a == "")

        {

            $.ajax({

                url: "ccc.ashx",

                data: { "areacode": $("#sel2").val() },

                type: "post",

                dataType: "json",

                success: function (msg) {

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

                        var v = "<option value=\"" + msg[i].code + "\">" + msg[i].name + "</option>";

                        $("#sel3").append(v);

                    }

                },

                error: function () {

                },

                beforeSend: function () {

                    $("#sel3").html('');

                },

                complete: function () {

                }

            });

        }

    }

    //选项改变时查询方法

    $("#sel1").change(function(){  //当1选项改变时2执行

        selectlode("");

    });

    $("#sel2").change(function () {   //当2选项改变时3执行

        selectlode("");

    });

</script>

.aspx

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

using System;

using System.Web;

using System.Linq;                 //**********

using System.Collections.Generic;  //**********     三个引入的命名空间

using System.Text;                  //**********

public class ccc : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        StringBuilder str = new StringBuilder();  

        str.Append("[");                           // 字符串拼接                    

        string s = context.Request["areacode"];

        using (DataClassesDataContext con = new DataClassesDataContext())

        {

            List<ChinaStates> clist = new List<ChinaStates>();

            clist = con.ChinaStates.Where(r => r.ParentAreaCode ==s).ToList();

            int count = ;

            foreach (ChinaStates c in clist)

            {

                if (count > )

                {

                    str.Append(",");

                }

                str.Append("{\"code\":\""+c.AreaCode +"\",\"name\":\""+c.AreaName+"\"}");

                count++;          //将查询结果拼接成 json 对象！！！！！！！

            }

        }

        str.Append("]");

        context.Response.Write(str);

        context.Response.End();

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}

.ashx

AJAX 实战【三级联动】分析的更多相关文章

  1. JQuery+Ajax实战三级下拉列表联动（八）

    本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...

  2. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  3. ajax 实现三级联动

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  4. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

  5. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  6. PHP ajax 实现三级联动

    在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: $(document).ready(function(e) { $("#sanji&qu ...

  7. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  8. 完整的Ajax及三级联动小练习

    Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理 ...

  9. Ajax实现三级联动(0520)

    查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...

  10. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

随机推荐

  1. getResource()和getResourceAsStream以及路径问题

    用JAVA获取文件,听似简单,但对于很多像我这样的新人来说,还是掌握颇浅,用起来感觉颇深,大常最经常用的,就是用JAVA的File类,如要取得c:/test.txt文件,就会这样用File file ...

  2. 整理python小爬虫

    编码使我快乐!!! 我也不知道为什么,遇到自己喜欢的事情,就越想做下去,可以一个月不出门,但是不能一天没有电脑 掌握程度:对python有了一个更清晰的认识,自动化运维,也许可以用python实现呢, ...

  3. ajax 删除数据无刷新

    //html页面 <!doctype html><head> <title></title> <meta http-equiv="Con ...

  4. Vuejs——（13）组件——杂项

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  5. Zhu-Takaoka Two-dimensional Pattern Matching

    Two dimensional pattern matching. Details may be added later.... Corresponding more work can be foun ...

  6. 【洛谷4070】 [SDOI2016]生成魔咒（SAM）

    传送门 洛谷 Solution 考虑要求的是什么,前缀的本质不同的字符串个数? 如果只要求一个串那么显然答案是\(\sum_{i=1}^{tot}len[i]-len[fa[i]]\)(实际上这个并不 ...

  7. Android 网络交互之下载断点续传

    一.概述 1.概念 断点续传主要用于下载,本文也主要讲述下载时的断点续传的逻辑思路.顾名思义,断点续传就是下载从中断的地方继续下载,一般是因为暂停或者网络故障导致的下载中断,当恢复下载的时候可以从已经 ...

  8. Java学习笔记49（DBUtils工具类二）

    上一篇文章是我们自己模拟的DBUtils工具类,其实有开发好的工具类 这里使用commons-dbutils-1.6.jar 事务的简单介绍: 在数据库中应用事务处理案例:转账案例 张三和李四都有有自 ...

  9. linux常用的BootLoader U-boot的前世今生

    U-Boot,全称 Universal Boot Loader,是遵循GPL条款的开放源码项目.U-Boot的作用是系统引导. U-Boot从FADSROM.8xxROM.PPCBOOT逐步发展演化而 ...

  10. java面试题：当一个对象被当作参数传递到一个方法后，此方法可改变这个对象的属性，并可返回变化后的结果，那么这里到底是值传递还是引用传递?

    答:是值传递.Java编程语言只有值传递参数. 当一个对象实例作为一个参数被传递到方法中时,参数的值就是该对象的引用一个副本.指向同一个对象,对象的内容可以在被调用的方法中改变,但对象的引用(不是引用 ...