使用 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. 用Rider写一个由Autofac管理资源的WebAPI应用程序

    一:步骤和上一篇创建控制台项目一样,不过这次选择的是.net core区域下的Asp.net web application,Type里选择Web API(Web API类似java里的SpringB ...

  2. VIP之CSC

    Color Space Converter II(CSC)   不同的色彩空间用于不同的设备.如RGB一般用于电脑显示器,YCbCr一般用于数字电视,IP还支持最小和最大的保护带[个人理解,这里的保护 ...

  3. Android-Java-构造方法内存图

    描述Dog对象: package android.java.oop07; // 描述Dog对象/实体 public class Dog { private String name; private i ...

  4. commons-text 生成指定长度的随机字符串

    package com.skylink.junge.demo; import java.util.HashSet; import java.util.Set; import org.apache.co ...

  5. SSH框架搭建过程详解

    Spring.Struts2.Hibernate框架: 具体三大框架的知识以前的文章写过,在这里整合 Spring框架知识:http://www.cnblogs.com/xuyiqing/catego ...

  6. 学习Python语言 基础语法：变量的基本使用

    Python变量 程序是用来处理数据的,变量就是用来保存数据的,通过给数据定义一个名称来保证方便记忆和识别.使用这个数据.变量可以保存所有类型的数据. Python变量的定义 在Python中,变量的 ...

  7. Nginx的安装与部署

    1:安装工具包 wget.vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc g ...

  8. Netty：Channel 建立后消息发送失败

    1. 问题现象 Channel 建立后消息发送失败: ChannelFuture future = DeviceManager.getBootstrap().connect(); deviceChan ...

  9. Java入门知识点

    Java入门知识点   Java源代码的流程 Java程序由.java文件生成,通过JVM进行编译得到字节文件.class class HelloWorld { public static void ...

  10. HoloLens开发手记－凝视 Gaze

    在全息应用中,凝视是第一种输入形式,被用于定位物体(功能和PC的光标指针类似).凝视告诉你用户正在看向世界中的位置,让你能够确定他们的意图.在现实世界中,你通常会盯着你打算与之交互的物体.这种方式与凝 ...