完整的Ajax及三级联动小练习

Ajax结构:

 var name = $("#text_1").val();
$.ajax({
url: "Ashxs/Handler.ashx",//一般处理程序路径
data: { "name": name },//要传输的数据,冒号前面是键名后面是要传输的数据,如果有多条数据在大括号内用逗号拼接
type: "post",//传输方式
dataType: "json",//返回数据类型
success: function (has) {//has是自定义的,必须有
if (has.hasname == "1") {//hasname是一般处理程序返回数据的键名
$("#span_1").text("用户名已存在!");
}
else {
$("#span_1").text("用户名可用!");
}
}
});
error要在success花括号后面加逗号使用,beforSend和complete同样也是一次在上一个的花括号下面加逗号使用
error:function(){
//服务器连接不上,或是返回内容有错误,就走这里
//通常可以使用这玩意排错
}
beforeSend:function(){
//ajax一执行,就立马执行这个方法
}
complete:function(){
//ajax里的success或是error执行完毕,立马执行这里
}

json基本结构:

"{\"hasname\":\"1\"}"
"[{"name":"zhangsan","pwd":""},{"name":"lisi","pwd":""}]"
//就是一个字符串,冒号前面是键名后面是数据,如果有多条数据用逗号拼接,然后用英文的中括号括起来

三级联动小练习

一般处理程序:

  DataClassesDataContext DC = new DataClassesDataContext();
public void ProcessRequest(HttpContext context)
{
int count = ;
string end = "[";
var list = DC.ChinaStates.Where(r => r.ParentAreaCode == context.Request["Pplace"]);
foreach (ChinaStates C in list)
{
if (count == )
{
end += "{\"place\":\"" + C.AreaName + "\",\"Pcode\":\"" + C.AreaCode + "\"}";
}
else
{
end += ",{\"place\":\"" + C.AreaName + "\",\"Pcode\":\"" + C.AreaCode + "\"}";
}
count++;
}
end += "]";
context.Response.Write(end);

html页面:

<select id="select_1"></select>
<select id="select_2"></select>
<select id="select_3"></select> <script>
$.ajax({
url: "Ashxs/Handler2.ashx",
data: { "Pplace": "0001" },
type: "post",
dataType: "json",
success: function (da) {
for (i in da) {
var OP = new Option(da[i].place, da[i].Pcode);
$("#select_1").get(0).add(OP);
}
place1();
}
});//显示全部省级数据
$("#select_1").change(function () { place1() });
$("#select_2").change(function () { place2() });
function place1() {
$("#select_2").empty();
$.ajax({
url: "Ashxs/Handler2.ashx",
data: { "Pplace": $("#select_1").val() },
type: "post",
dataType: "json",
success: function (da) {
for (i in da) {
$("#select_2").get(0).add(new Option(da[i].place, da[i].Pcode));
}
place2();
}
});
}//显示市级数据
function place2() {
$("#select_3").empty();
$.ajax({
url: "Ashxs/Handler2.ashx",
data: { "Pplace": $("#select_2").val() },
type: "post",
dataType: "json",
success: function (da) {
for (i in da) {
$("#select_3").get(0).add(new Option(da[i].place, da[i].Pcode));
}
}
});
}//显示县级数据
</script>
上一篇:SQL - 复制数据库中的一行


下一篇:nodejs的__dirname与__filename