• 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>
  • 相关阅读:
    jquery-easyUI第一篇【介绍、入门、使用常用的组件】
    Lucene第二篇【抽取工具类、索引库优化、分词器、高亮、摘要、排序、多条件搜索】
    Lucene第一篇【介绍Lucene、快速入门】
    Oracle总结第三篇【PLSQL】
    Oracle总结第二篇【视图、索引、事务、用户权限、批量操作】
    Oracle卸载
    纳税服务系统【统计图Fusionchart】
    纳税服务系统【自动受理,Quartz任务调度】
    纳税服务系统【投诉受理管理,显示投诉信息、处理回复、我要投诉】
    导航条样式代码
  • 原文地址:https://www.cnblogs.com/mazhijie/p/5769028.html
Copyright © 2020-2023  润新知