zoukankan      html  css  js  c++  java
  • 完整的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花括号后面加逗号使用,beforSendcomplete同样也是一次在上一个的花括号下面加逗号使用 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>
  • 相关阅读:
    Eclipse 导入项目乱码问题(中文乱码)
    sql中视图视图的作用
    Java基础-super关键字与this关键字
    Android LayoutInflater.inflate(int resource, ViewGroup root, boolean attachToRoot)的参数理解
    Android View和ViewGroup
    工厂方法模式(java 设计模式)
    设计模式(java) 单例模式 单例类
    eclipse乱码解决方法
    No resource found that matches the given name 'Theme.AppCompat.Light 的完美解决方案
    【转】使用 Eclipse 调试 Java 程序的 10 个技巧
  • 原文地址:https://www.cnblogs.com/zyg316/p/5771260.html
Copyright © 2011-2022 走看看