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