完整的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":"1234"},{"name":"lisi","pwd":"12345"}]"
//就是一个字符串，冒号前面是键名后面是数据，如果有多条数据用逗号拼接，然后用英文的中括号括起来

三级联动小练习：

一般处理程序：

 1 DataClassesDataContext DC = new DataClassesDataContext();
 2     public void ProcessRequest(HttpContext context)
 3     {
 4         int count = 0;
 5         string end = "[";
 6         var list = DC.ChinaStates.Where(r => r.ParentAreaCode == context.Request["Pplace"]);
 7         foreach (ChinaStates C in list)
 8         {
 9             if (count == 0)
10             {
11                 end += "{"place":"" + C.AreaName + "","Pcode":"" + C.AreaCode + ""}";
12             }
13             else
14             {
15                 end += ",{"place":"" + C.AreaName + "","Pcode":"" + C.AreaCode + ""}";
16             }
17             count++;
18         }
19         end += "]";
20         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>