24H免费课程咨询  TEL:13401595960   QQ:1870218756  微信:13401595960(李老师)

东方博宜

网站首页 > 软件开发资讯 > PHP开发

[常州开发培训]级联菜单和Ajax的调用

2017-12-03 16:50:12 东方博宜 阅读

1、级联菜单

例子:

                   年级:

                   <select class="grade">

                      <option value="">-请选择-</option>

                   </select>

        

                   科目:

                   <select class="course">

                            <option value="请选择">-请选择-</option>

                   </select>

        

                   <script src="js/jquery-1.11.3.js"></script>

                   <script>

                      $(document).ready(function(){

                            //var grade = [""];

                            var grade = new Array("大一","大二","大三","大四");

                            var a = ["大学英语","大学物理","高等数学"];

                            var b = ["C语言","马克思主义","电子电路"];

                            var c = ["二级考试","英语四级"];

                            var d = ["毕业设计","哲学选修"];

                            var course = new Array(a,b,c,d);

                            

                            //加载年级

                            for(var i = 0;i < grade.length;i++){

                                $(".grade").append("<option value='" + grade[i] + "'>" + grade[i] + "</option>");

                            }

                            

                            //当年级发生修改时

                            $(".grade").change(function(){

                                 var g = $(this).val();//当前选择的年级

                                 //如果年级是空的

                                 if(g == ""){

                                    $(".course").html("<option value=''>-请选择-</option>");

                                 }else{

                                    var index = $(this).find("option[value='" + g + "']").index();//获取被点击的option的下标(第几个)

                                    var c = course[index - 1];//科目的数组

                                    

                                    //将科目显示到科目的下拉菜单

                                    var res = "";

                                    for(var i = 0;i < c.length;i++){

                                       res = res + "<option value='" + c[i] + "'>" + c[i] + "</option>";

                                    }

                                    

                                    //替换course下拉菜单的option

                                    $(".course").html(res);

                                 }

                            });

                      });

         </script>

2、通过接口调用数据

Ajax基础语法:

                         //检验逻辑

                         $.ajax({

                             //后台地址

                             url:"CheckNameServlet"

                             ,

                             //提交方式:getpost

                             type:"post"

                             ,

                             //data表示我们需要向后台传递的参数

                             data:{

                                username:name

                                ,

                                r:Math.random()

                             }

                             ,

                             //ajax处理结束(data表示后台的返回值)

                             success:function(data,status){

                                 if(data == "yes"){

                                    jq(".error").html("<span style='color:green'>用户名可用</span>");

                                 }else{

                                    jq(".error").html("用户名被占用,请尝试其他用户");

                                 }

                             }

                         });

 

阿里云市场接口:https://market.aliyun.com/data?spm=5176.9502607.401001.6.qHYPuJ

 

接口访问的安全性!

策略:

A、定义可访问域(哪些域名对应的代码可以访问?)

B、通过key来控制可访问的用户

 

本例采用的接口:

http://demo.0519os.com/gradeapi.php

参数定义:

action表示操作目的:

getgrade表示获取年级

getcourse表示获取某个年级的科目(但要求一定要传送后台有的年级)

 

调用demo

获取年级:http://demo.0519os.com/gradeapi.php?action=getgrade

获取某个年级的科目:

http://demo.0519os.com/gradeapi.php?action=getcourse&grade=大一

 

参考手册:http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

 

例子:

                   年级:

                   <select class="grade">

                      <option value="">-请选择-</option>

                   </select>

            

                   科目:

                   <select class="course">

                            <option value="请选择">-请选择-</option>

                   </select>

        

                   <script src="js/jquery-1.11.3.js"></script>

                   <script>

                      $(document).ready(function(){

                            $(".grade").after("<span>年级获取中...</span>");

                            $.ajax({

                               url:"http://demo.0519os.com/gradeapi.php?action=getgrade&r=" + Math.random()

                               ,

                               type:"get"

                               ,

                               success:function(data,status){

                                       $(".grade").next(".load").remove();//去除加载中的提示信息

                                       var grade = data.split(",");

                                       for(var i = 0;i < grade.length;i++){

                                              $(".grade").append("<option value='" + grade[i] + "'>" + grade[i] + "</option>");

                                       }

                               }

                            });

                            

                            //当年级选择了之后

                            $(".grade").change(function(){

                                  $(".course").after("<span>科目获取中...</span>");

                                var g = $(this).val();

                                //如果是请选择

                                if(g == ""){

                                        $(".course").html("<option value=''>-请选择-</option>");

                                        $(".course").next(".load").remove();

                                }else{

                                         //获取年级对应的科目

                                         $.ajax({

                                             url:"http://demo.0519os.com/gradeapi.php?action=getcourse"

                                             ,

                                             type:"post"

                                             ,

                                             data:{

                                                grade:g

                                                ,

                                                r:Math.random() 

                                             }

                                             ,

                                             success:function(data,status){

                                                     $(".course").next(".load").remove();

                                                     var course = data.split(",");

                                                     var str = "";

                                                     for(var i = 0;i < course.length;i++){

                                                         str = str + "<option value='" + course[i] + "'>" + course[i] + "</option>"

                                                     }

                                                     $(".course").html(str);

                                             }

                                         });

                                }

                            });

                      });

         </script>

 

图片.png

Powered by 东方博宜教育咨询江苏有限公司  ©2008-2017 www.czos.cn