AJAX 实战【三级联动】分析

使用 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
        {
            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("1");       //执行 a=1
  
    //写一个加载方法

    function selectlode(a) {  

        if (a == "1")
        { 
           $.ajax({
                url: "ccc.ashx",
                data: {"areacode":"0001"},
                type: "post",
                dataType: "json",
                success: function (msg) {     //接收 ajax 传出了的数据
              
                    for (var i=0 ; i < msg.length; i++)
                    {
                                               //将结果编写成 html 标记语言

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

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

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

                },
                error: function () {
                    
                },
                beforeSend: function () {

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

                },
                complete: function () {

                }

            });
        }


        if (a == "2")
        {
            $.ajax({
                url: "ccc.ashx",
                data: { "areacode": $("#sel1").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {


                    for (var i = 0 ; i < msg.length; i++) {
                        var v = "<option value="" + msg[i].code + "">" + msg[i].name + "</option>";

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

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

                },
                error: function () {
                   
                },
                beforeSend: function () {

                    $("#sel2").html('');
                },
                complete: function () {

                }

            });

        }


        if (a == "3")
        {
            $.ajax({
                url: "ccc.ashx",
                data: { "areacode": $("#sel2").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {
                 
                    for (var i = 0 ; 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("2");
    });

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

    });



</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 = 0;
            foreach (ChinaStates c in clist)
            {
                if (count > 0)
                {
                    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