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>