ajax调用数据案例，二级联动

题目：请针对移动端web浏览器制作一个结账数据信息展示页面

要求：

1、页面样式除不使用表格呈现外，可自由选择其他呈现方式

2、需符合移动端操作习惯

3、可根据服务区、门店查询结账信息

4、可根据时间段对结账信息进行筛选

Ajax交互接口：

1、务区数据列表：(对象名称：SERVERPARTObject)

http://eshang.imwork.net:6060/HighWay/Handler/handler_ajax.ashx?action_type=getTotalServerPart

参数内容：

SERVERPART_ID:内码

SERVERPART_NAME:服务区名称

SERVERPART_CODE:服务区编码

2、店数据列表：（对象名称：ServerPartShopObject）

http://eshang.imwork.net:6060/HighWay/Handler/handler_ajax.ashx?action_type=getServerPartShop&action_data=SERVERPART_ID

参数内容：

SERVERPARTSHOP_ID:内码

SHOPNAME:门店名称

SHOPCODE:门店编码

注：加黑字段为服务区内码值

3、结账数据列表：（对象名称：EndaccountObject）

http://eshang.imwork.net:6060/HighWay/Handler/handler_ajax.ashx?action_type=getServerPartEndaccount&action_data=SERVERPARTSHOP_ID

参数内容：

SERVERPART_NAME:服务区名称 SHOPNAME:门店名称

TICKETCOUNT:客单数量 TOTALCOUNT:销售数量

TOTALSELLAMOUNT:销售金额 CASHPAY:长短款

MOBILEPAYMENT:移动支付金额 ENDACCOUNT_DATE:结账时间

注：客单均价=销售金额/客单数量,加黑字段为门店内码值

重点代码：

第一级联动：

//第一级联动数据
            $(function(){
                $.ajax({
                    url:"http://eshang.imwork.net:6060/HighWay/Handler/handler_ajax.ashx?action_type=getTotalServerPart",
                    type:"post",
                    dataType:"json",
                    success:function(data){
                        var html = "";
                        $.each(data.SERVERPARTObject,function(index,result){
                            html +='<option value= '+result.SERVERPART_ID+'>'+result.SERVERPART_NAME+'</option>';
                        });
                        $("#SERVERPART_NAME").append(html);
                    },
                    error:function(){
                        alert("请求失败");
                    }
                })
            })

第二级联动

 1 //            第二级动态请求联动数据
 2             $("#SERVERPART_NAME").on("change",function(){
 3                 var sel_val = $(this).find("option:selected").val();//获取一级的选择参数
 4                 $("#SHOPNAME").empty();//填入新数据前清空数据
 5                 $.ajax({
 6                     url:"http://eshang.imwork.net:6060/HighWay/Handler/handler_ajax.ashx?action_type=getServerPartShop&",
 7                     dataType:"json",
 8                     type:"get",
 9                     data:{"action_data":sel_val},
10                     success: function(data){
11                         var html = "";
12                         $.each(data.ServerPartShopObject,function(index,result){
13                             html += '<option value= '+result.SERVERPARTSHOP_ID+'>'+result.SHOPNAME+'</option>';
14                         })
15                         $("#SHOPNAME").append(html);
16                     },
17                     error: function(){
18                         alert("请求失败")
19                     }
20                     
21                 })
22             })

完整代码（将jQuery路径改下）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>数据查询</title>
        <script src="../jquery.min.js"></script>
        <style>
            select{width:45%;height:30px;line-height:30px;}
            option{line-height:30px;height:30px;}
            table td{padding:5px 15px;}
        </style>
    </head>
    
    <body>
        <select id="SERVERPART_NAME">
            <!--<option value="1">默认</option>-->
        </select>
        <select id="SHOPNAME">
            <!--<option value="1">默认</option>-->
        </select>
        <button id="search" type="button">查询</button>
        <table id="table"></table>
        <script>
            
            //第一级联动数据
            $(function(){
                $.ajax({
                    url:"http://eshang.imwork.net:6060/HighWay/Handler/handler_ajax.ashx?action_type=getTotalServerPart",
                    type:"post",
                    dataType:"json",
                    success:function(data){
                        var html = "";
                        $.each(data.SERVERPARTObject,function(index,result){
                            html +='<option value= '+result.SERVERPART_ID+'>'+result.SERVERPART_NAME+'</option>';
                        });
                        $("#SERVERPART_NAME").append(html);
                    },
                    error:function(){
                        alert("请求失败");
                    }
                })
            })
            
//            第二级默认数据
            $.ajax({
                url:"http://eshang.imwork.net:6060/HighWay/Handler/handler_ajax.ashx?action_type=getServerPartShop&",
                type:"get",
                data:{"action_data":109},
                dataType:"json",
                success: function(data){
                    var html = "";
                    $.each(data.ServerPartShopObject,function(index,result){
                        html += '<option value= '+result.SERVERPARTSHOP_ID+'>'+result.SHOPNAME+'</option>';
                    })
                    $("#SHOPNAME").append(html);
                },
                error: function(){
                    alert("请求失败")
                }
            })
            
//            第二级动态请求联动数据
            $("#SERVERPART_NAME").on("change",function(){
                var sel_val = $(this).find("option:selected").val();//获取一级的选择参数
                $("#SHOPNAME").empty();//填入新数据前清空数据
                $.ajax({
                    url:"http://eshang.imwork.net:6060/HighWay/Handler/handler_ajax.ashx?action_type=getServerPartShop&",
                    dataType:"json",
                    type:"get",
                    data:{"action_data":sel_val},
                    success: function(data){
                        var html = "";
                        $.each(data.ServerPartShopObject,function(index,result){
                            html += '<option value= '+result.SERVERPARTSHOP_ID+'>'+result.SHOPNAME+'</option>';
                        })
                        $("#SHOPNAME").append(html);
                    },
                    error: function(){
                        alert("请求失败")
                    }
                    
                })
            })
            
            //查询数据
//            var putTouch=document.getElementById('search');
//    putTouch.addEventListener('touchstart', function(){
            $("#search").on("touchstart",function(){
                var sel_val = $("#SHOPNAME").val();
                $.ajax({
                    url:"http://eshang.imwork.net:6060/HighWay/Handler/handler_ajax.ashx?action_type=getServerPartEndaccount&",
                    dataType:"json",
                    type:"get",
                    data:{
                        "action_data" : sel_val
                    },
                    success: function(data){
                        var EndaccountObject = data.EndaccountObject;
                        var html = "";
                        $.each(EndaccountObject,function(index,rusult){
                            html += "<tr><td>服务区名称</td><td>门店名称</td><td>客单数量</td><td>销售数量</td><td>销售金额</td><td>长短款</td><td>移动支付金额</td><td>结账时间</td></tr>"
                            +"<tr><td>"+rusult.SERVERPART_NAME+"</td><td>"+rusult.SHOPNAME+"</td><td>"+rusult.TICKETCOUNT+"</td><td>"+rusult.TOTALCOUNT+"</td><td>"+rusult.TOTALSELLAMOUNT+"</td><td>"+rusult.CASHPAY+"</td><td>"+rusult.MOBILEPAYMENT+"</td><td>"+rusult.ENDACCOUNT_DATE+"</td></tr>";
                        });
                        $("#table").empty();
                        $("#table").append(html);
                    }
                    
                })
            })
            
        </script>
    </body>
</html>

相关阅读:
Vue axios 使用记录
 Vue CLI 项目创建
 Vue中的事件修饰符。
js 中控制打印方向横向还是纵向。
element ui 列表中删除只能删除最后一项
 文件上传formData上传之前查看对象里的值
 GridControl_gridView 单元格内容换行（wrap）
SqlTest(2013-07-10)
printPreviewControl1 打印预览
 避免button处理事件过程中点击按钮触发事件的方法
原文地址：https://www.cnblogs.com/LChenglong/p/6734989.html