使用 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. 14.2.4HTML5约束API验证

    <body> <form> <!-- required属性在提交表单时不能空着 这个属性适用于<input> <textarea> <sel ...

  2. 08-jQuery的位置信息

    Query的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽 ...

  3. 2.3.7synchronized代码块有volatile同步的功能

    关键字synchronized可以使多个线程访问同一个资源具有同步性,而且他还具有将线程工作内存中的私有变量与公共内存中的变量同步的功能. package com.cky.thread; /** * ...

  4. js 基本

    JavaScrip组成:1.ECMAScrip --核心2.DOM 文档对象模型3.BOOM 浏览器对象模型 JavaScrip写法分类:1.内联式写在标签内以属性为表现:2.内嵌式以script标签 ...

  5. win7 装docker

    Win7安装Docker 主要是装这个 ,官网没有win7版本 Docker Toolbox on Windows

  6. GCD on Blackboard

    题目大意:给你n个数,然后在这n个数中选一个数,选中的这个数可以变成任意的数,使这n个数的gcd(最大公约数)最大.打印这个最大的gcd. 思路:这题一看貌似很复杂,其实这题只要你知道前缀和  和  ...

  7. cookie&session的Q&A故事[原理篇]

    引语:cookie和session在网站开发中,起着无可厚非的重要作用,但是我们平时往往都只是通过某种语言作为介质,通过某些接口函数进行cookie和session的操作,而对其原理可能不了解或一知半 ...

  8. Tools - 源代码阅读分析工具Source Insight

    简介 https://www.sourceinsight.com/ Source Insight是一个面向项目开发的程序编辑器和代码浏览器,可以分析C/C++.C#.Java.Python等语言源代码 ...

  9. Spring Boot 核心配置文件 bootstrap & application 详解。

    用过 Spring Boot 的都知道在 Spring Boot 中有以下两种配置文件 bootstrap (.yml 或者 .properties) application (.yml 或者 .pr ...

  10. Liferay7 BPM门户开发之22: Liferay7模型监听器（Model Listeners）

    Model Listeners实现ModelListener接口,用于持久化时的AOP处理 一些使用场景: Audit Listener: 在一个独立而分离的数据库,做信息更新的审计: Cache C ...