ajax調用數據案例，二級聯動

本文轉載自查看原文 2017-04-19 18:52 1791 ajax應用/ ajax基礎/ aJax/ 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Ajax二級聯動 Ajax實現的城市二級聯動一 json數據二級聯動省市二級聯動基礎數據 PHP+ajax實現二級聯動 Java Web——Ajax(實現省份城市二級聯動) Spring MVC中Ajax實現二級聯動 js 二級聯動 MVC 二級聯動 ##uniapp 二級聯動