码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-08-13 22:42:57      阅读:461      评论:0      收藏:0      [点我收藏+]

标签:

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         });

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         <select id="select_1"></select>
 2         <select id="select_2"></select>
 3         <select id="select_3"></select>    
 4 
 5 
 6         <script>
 7         $.ajax({
 8         url: "Ashxs/Handler2.ashx",
 9         data: { "Pplace": "0001" },
10         type: "post",
11         dataType: "json",
12         success: function (da) {
13             for (i in da) {
14                 var OP = new Option(da[i].place, da[i].Pcode);
15                 $("#select_1").get(0).add(OP);
16             }
17             place1();
18         }
19     });//显示全部省级数据
20     $("#select_1").change(function () { place1() });
21     $("#select_2").change(function () { place2() });
22     function place1() {
23         $("#select_2").empty();
24         $.ajax({
25             url: "Ashxs/Handler2.ashx",
26             data: { "Pplace": $("#select_1").val() },
27             type: "post",
28             dataType: "json",
29             success: function (da) {
30                 for (i in da) {
31                     $("#select_2").get(0).add(new Option(da[i].place, da[i].Pcode));
32                 }
33                 place2();
34             }
35         });
36     }//显示市级数据
37     function place2() {
38         $("#select_3").empty();
39         $.ajax({
40             url: "Ashxs/Handler2.ashx",
41             data: { "Pplace": $("#select_2").val() },
42             type: "post",
43             dataType: "json",
44             success: function (da) {
45                 for (i in da) {
46                     $("#select_3").get(0).add(new Option(da[i].place, da[i].Pcode));
47                 }
48             }
49         });
50     }//显示县级数据
51 </script>

 

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

标签:

原文地址:http://www.cnblogs.com/mazhijie/p/5769028.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!