一、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("加载数据");
}
});
二、三级联动的制作
<!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(""); //加载数据的方法：
function statesload(a) {
if (a == "")
{
//加载省
$.ajax({
url: "Area.ashx",
data: { "pcode": "" },
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("");
},
beforeSend: function () {
$("#province").append("<option value='null'>加载中...</option>");
},
complete: function () { }
});
}
if (a == "")
{
//加载市
$.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("");
},
beforeSend: function () {
$("#city").empty();
$("#city").append("<option value='null'>加载中...</option>");
},
complete: function () { }
}); }
if (a == "")
{
//加载区县
$.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("");
}); $("#city").change(function () {
statesload("");
}); </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();
string id = context.Request["pcode"];
StringBuilder str = new StringBuilder();
int count=; 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 > ) 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;
}
} }
一般处理程序