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

完整的Ajax及三级联动小练习

时间:2016-08-14 23:48:19      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

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: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>

 

完整的Ajax及三级联动小练习

标签:

原文地址:http://www.cnblogs.com/zyg316/p/5771260.html

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