使用 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. 2019.02.21 bzoj2829: 信用卡凸包（凸包）

    传送门 题意:给nnn个A∗BA*BA∗B的矩形,其中每个矩形的四个角被改造成了半径为rrr的四分之一 圆,问这些矩形的凸包周长. 思路:考虑求出圆心的凸包周长然后加上一个整圆的周长,证明很简单,略掉 ...

  2. LOJ-10108（欧拉回路+并查集）一个图至少用几笔画成

    题目链接:传送门 思路: 用并查集统计出每个区块奇数个节点的个数x,每个区块对笔画的贡献是max(x/2,1): 然后每个区块求和即可. #include<iostream> #inclu ...

  3. Html5与Css3知识点拾遗（五）

    css3更新的颜色 RGBA:红.绿.蓝.不透明度 rgba(89,0,127,0.4); HSL和HSLA:色相.饱和度.亮度.不透明度 hsl(282,100%,25%); hsl(282,100 ...

  4. Vuejs——（9）组件——props数据传递

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

  5. git & github 同步文件

    step1 : 在github上建立一个 repository https://github.com/ntu-juking/softwaretesting.git repository name is ...

  6. Repository 简化实现多条件查询

    Repository 在做查询的时候,如果查询条件多的话,linq查询表达式会写的很复杂,比如: public IQueryable<Student> Get(int id, string ...

  7. 2019年微服务5大趋势，你pick哪个？

    2018年对于微服务来说是非常重要的一年,这一年Service Mesh开始崭露头角,解决服务间复杂的通信问题,这一年很多国内互联网公司已经有了较为成熟的微服务实践案例,网易云主办的微服务实践沙龙中也 ...

  8. ng 的 ng-repeat（对象） 把对象的 key 和value 都拿出来 循环

    对象的repeat  是这种形式

  9. 处理返回键劫持（结合vue）

    在这里记录一下近期解决的一个问题 需求,在某个页面,浏览器返回按钮点击的时候,不能走浏览器的默认返回操作,而是要走自己的逻辑, 比如跳转页面等等. 那么问题来了,如何去不走默认返回呢.经过网上搜罗和同 ...

  10. Python基础入门教程（3）

    人生苦短,我学Pyhton Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于199 ...