【2017-06-06】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("加载数据");

}

});

 

二、三级联动的制作

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title></title>
  6     <script src="js/jquery-1.7.1.min.js"></script>
  7     <style type="text/css">
  8         .states {
  9         width:100px;
 10         height:30px;
 11         
 12         }
 13     </style>
 14 </head>
 15 <body>
 16     <select class="states" id="province"></select>
 17     <select class="states" id="city"></select>
 18     <select class="states" id="county"></select>
 19 </body>
 20 </html>
 21 <script type="text/javascript">
 22 
 23     statesload("1");
 24     
 25     //加载数据的方法：
 26     function statesload(a) {
 27         if (a == "1")
 28         {
 29             //加载省
 30             $.ajax({
 31                 url: "Area.ashx",
 32                 data: { "pcode": "0001" },
 33                 type: "post",
 34                 dataType: "json",
 35                 success: function (msg) {
 36                     //先把<select></select>中的选项清空
 37                     $("#province").empty();
 38                     for (var i in msg)
 39                     {
 40                         var str="<option value='"+msg[i].areacode+"' >"+msg[i].areaname+"</option>"
 41                         $("#province").append(str);
 42                     }
 43                     //在加载完省以后再加载市
 44                     statesload("2");
 45                 },
 46                 beforeSend: function () {
 47                     $("#province").append("<option value='null'>加载中...</option>");
 48                 },
 49                 complete: function () {
 50                     
 51                 }
 52             });
 53         }
 54         if (a == "2")
 55         {
 56             //加载市
 57             $.ajax({
 58                 url: "Area.ashx",
 59                 data: { "pcode": $("#province").val() },
 60                 type: "post",
 61                 dataType: "json",
 62                 success: function (msg) {
 63                     $("#city").empty();
 64                     for (var i in msg) {
 65                         var str = "<option value=\"" + msg[i].areacode + "\" >" + msg[i].areaname + "</option>"
 66                         $("#city").append(str);
 67                     }
 68                     //加载完市以后再加载区县
 69                     statesload("3");
 70                 },
 71                 beforeSend: function () {
 72                     $("#city").empty();
 73                     $("#city").append("<option value='null'>加载中...</option>");
 74                 },
 75                 complete: function () {
 76                    
 77                 }
 78             });
 79 
 80         }
 81         if (a == "3")
 82         {
 83             //加载区县
 84             $.ajax({
 85                 url: "Area.ashx",
 86                 data: { "pcode": $("#city").val() },
 87                 type: "post",
 88                 dataType: "json",
 89                 success: function (msg) {
 90 
 91                     $("#county").empty();
 92                     for (var i in msg) {
 93                         var str = "<option value=\"" + msg[i].areacode + "\" >" + msg[i].areaname + "</option>"
 94                         $("#county").append(str);
 95                     }
 96                 },
 97                 beforeSend: function () {
 98 
 99                     $("#county").empty();
100                     $("#county").append("<option value='null'>加载中...</option>");
101 
102                 }
103             });
104         }
105     }
106 
107     $("#province").change(function () {
108         statesload("2");
109     });
110 
111     $("#city").change(function () {
112         statesload("3");
113     });
114 
115 </script>
三级联动界面和Jquery

 

<%@ 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;
        }
    }

}
一般处理程序

 

posted @ 2017-06-07 15:34  疯丶无度  阅读(207)  评论(0)  编辑  收藏  举报