完整的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>