使用 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. ABP框架系列之三十六：(MVC-Views-MVC视图)

    Introduction ASP.NET Boilerplate is integrated to MVC Views via Abp.Web.Mvc nuget package. You can c ...

  2. DX与OpenGL投影矩阵的区别

    之前学习DX和OpenGL时到是知道一点,但是没仔细研究过,只是跟着教程抄个公式就过了,看双API引擎时发现转换时是个问题,必须搞懂,gamedev上找了个解释,希望用得上. https://www. ...

  3. 1018 Public Bike Management (30) Dijkstra算法 + DFS

    题目及题解 https://blog.csdn.net/CV_Jason/article/details/81385228 迪杰斯特拉重新认识 两个核心的存储结构: int dis[n]: //记录每 ...

  4. Codeforces Round #541--1131F. Asya And Kittens(基础并查集)

    https://codeforces.com/contest/1131/problem/F #include<bits/stdc++.h> using namespace std; int ...

  5. Spring AOP中pointcut expression表达式

    Pointcut 是指那些方法需要被执行"AOP",是由"Pointcut Expression"来描述的. Pointcut可以有下列方式来定义或者通过&am ...

  6. IMAGE WATCH工具安装与学习

    1.下载安装 从下载地址搜索IMAGE WATCH,即可下载自己所需要的IMAGE WATCH工具. 安装ImageWatch,双击ImageWatch.vsix进行安装即可: 2.使用示例 这里首先 ...

  7. 7.AOP编程

    注解和xml混合使用 1.将所有的bean都配置xml中 <bean id="" class=""> 2.将所有的依赖都使用注解 @Autowire ...

  8. zookeeper配置文件共享中心

    最近频繁的系统上线,每次打包都要把配置文件替换为正式环境的配置文件,虽然说就是复制粘贴的事,架不住文件杂乱,而且多. 期初的想法是有没有办法将配置文件与系统隔离开来,这样在更新时候,就只需要更新代码部 ...

  9. Visual Studio Code 写Python 代码

    最近在博客园新闻里面看到微软发布的Visual Studio Code 挺好用的,现在在学习Python,查看官网发布的VSCode 是支持Python代码,自己试着安装用一下,下面是我的安装以及配置 ...

  10. 背水一战 Windows 10 (69) - 控件（控件基类）: UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性

    [源码下载] 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性 作者:w ...