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