ajax简介以及用ajax做的三级联动小练习

ajax基本结构：

 1         var name = $("#text_1").val();
 2         $.ajax({
 3             url: "Ashxs/Handler.ashx",//一般处理程序路径
 4             data: { "name": name },//要传输的数据，冒号前面是键名后面是要传输的数据，如果有多条数据在大括号内用逗号拼接
 5             type: "post",//传输方式
 6             dataType: "json",//返回数据类型
 7             success: function (has) {//has是自定义的，必须有
 8                 if (has.hasname == "1") {//hasname是一般处理程序返回数据的键名
 9                     $("#span_1").text("用户名已存在！");
10                 }
11                 else {
12                     $("#span_1").text("用户名可用！");
13                 }
14             }
15         });

ajax结构补充：

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页面：

 1 <body>
 2     <form id="form1" runat="server">
 3         <select id="select_1"></select>
 4         <select id="select_2"></select>
 5         <select id="select_3"></select>
 6     </form>
 7 </body>
 8 <script>
 9     //三级联动
10     place(1, "0001");
11     $("#select_1").change(function () { place(2, $("#select_1").val()) });
12     $("#select_2").change(function () { place(3, $("#select_2").val()) });
13     function place(num, data) {//num 1，省，2，市，3，县，data，父地区的编号
14         $.ajax({
15             url: "Ashxs/Handler2.ashx",
16             data: { "Pplace": data },
17             type: "post",
18             dataType: "json",
19             success: function (da) {
20                 if (num == 1) {
21                     for (i in da) {
22                         $("#select_1").get(0).add(new Option(da[i].place, da[i].Pcode));
23                     }
24                     place(2, $("#select_1").val());
25                 }
26                 else if (num == 2) {
27                     $("#select_2").empty();
28                     for (i in da) {
29                         $("#select_2").get(0).add(new Option(da[i].place, da[i].Pcode));
30                     }
31                     place(3, $("#select_2").val());
32                 }
33                 else if (num == 3) {
34                     $("#select_3").empty();
35                     for (i in da) {
36                         $("#select_3").get(0).add(new Option(da[i].place, da[i].Pcode));
37                     }
38                 }
39             }
40         });
41     }//显示数据函数
42 </script>