【2017-06-06】Ajax完整结构、三级联动的制作

最新推荐文章于 2025-12-04 16:02:23 发布

转载最新推荐文章于 2025-12-04 16:02:23 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/snow22546/p/6963459.html

文章标签：

#json #xhtml #c#

本文详细介绍了使用Ajax实现异步数据交互的过程，并通过一个具体的三级联动案例展示了如何结合jQuery进行网页元素的动态更新。从Ajax的基本配置到三级联动的逐步实现，文章提供了完整的代码示例。

一、Ajax完整结构

$.ajax({

url:"Main.ashx",

data:{},

dataType:"json",

type:"post",

async:false, //异步功能，默认是true，改为false就把异步关闭了

success:function(msg){

error:function(){ //服务端路径错误，服务端出错，服务端没有返回规定的json格式数据都会走error

beforeSend:function(){ //在发送之前执行这里的内容，可以限制用户重复提交请求。

$("#btn1").attr("disabled","disabled");

$("btn1").val("加载中...");

complete:function(){ //在ajax返回数据后回调，不管返回的数据是否正确都会回调

$("#btn1").removeAttr("disabled");

$("btn1").val("加载数据");

}

});

二、三级联动的制作

前台html和JQuery界面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <style type="text/css">
        .states {
        width:100px;
        height:30px;
        
        }
    </style>
</head>
<body>
    <select class="states" id="province"></select>
    <select class="states" id="city"></select>
    <select class="states" id="county"></select>
</body>
</html>
<script type="text/javascript">

    statesload("1");
    
    //加载数据的方法：
    function statesload(a) {
        if (a == "1")
        {
            //加载省
            $.ajax({
                url: "Area.ashx",
                data: { "pcode": "0001" },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    //先把<select></select>中的选项清空
                    $("#province").empty();
                    for (var i in msg)
                    {
                        var str="<option value='"+msg[i].areacode+"' >"+msg[i].areaname+"</option>"
                        $("#province").append(str);
                    }
                    //在加载完省以后再加载市
                    statesload("2");
                },
                beforeSend: function () {
                    $("#province").append("<option value='null'>加载中...</option>");
                },
                complete: function () {
                    
                }
            });
        }
        if (a == "2")
        {
            //加载市
            $.ajax({
                url: "Area.ashx",
                data: { "pcode": $("#province").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {
                    $("#city").empty();
                    for (var i in msg) {
                        var str = "<option value=\"" + msg[i].areacode + "\" >" + msg[i].areaname + "</option>"
                        $("#city").append(str);
                    }
                    //加载完市以后再加载区县
                    statesload("3");
                },
                beforeSend: function () {
                    $("#city").empty();
                    $("#city").append("<option value='null'>加载中...</option>");
                },
                complete: function () {
                   
                }
            });

        }
        if (a == "3")
        {
            //加载区县
            $.ajax({
                url: "Area.ashx",
                data: { "pcode": $("#city").val() },
                type: "post",
                dataType: "json",
                success: function (msg) {

                    $("#county").empty();
                    for (var i in msg) {
                        var str = "<option value=\"" + msg[i].areacode + "\" >" + msg[i].areaname + "</option>"
                        $("#county").append(str);
                    }
                },
                beforeSend: function () {

                    $("#county").empty();
                    $("#county").append("<option value='null'>加载中...</option>");

                }
            });
        }
    }

    $("#province").change(function () {
        statesload("2");
    });

    $("#city").change(function () {
        statesload("3");
    });

</script>

一般处理程序ashx界面

<%@ WebHandler Language="C#" Class="Area" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Text;

public class Area : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        //先睡上2秒再执行，模拟一下网速卡。
        System.Threading.Thread.Sleep(2000);
        string id = context.Request["pcode"];
        StringBuilder str = new StringBuilder();
        int count=0;
        
        str.Append("[");

        using (Data0216DataClassesDataContext con = new Data0216DataClassesDataContext())
        {
            List<ChinaStates> clist = con.ChinaStates.Where(r => r.ParentAreaCode == id).ToList();

            foreach (ChinaStates c in clist)
            {
                if (count > 0) str.Append(",");
                str.Append("{\"areaname\":\"" + c.AreaName + "\",\"areacode\":\"" + c.AreaCode + "\"}");
                count++;
            }
        }

        str.Append("]");
        context.Response.Write(str);
        context.Response.End();

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}