题目：请针对移动端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("请求失败");

                    }

                })

            })

第二级联动

 //            第二级动态请求联动数据

             $("#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("请求失败")

                     }

                 })

             })

完整代码（将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>

ajax调用数据案例，二级联动的更多相关文章

  1. Ajax——ajax调用数据总结

    在做人事系统加入批量改动的功能中,须要将前台中的数据传给后台.后台并运行一系列的操作. 通过查询和学习了解到能够通过ajax将值传入到后台,并在后台对数据进行操作. 说的简单点.就是ajax调用后台的 ...

  2. 多级联动系列——ajax调用XML实现三级联动

    ajax 使用起来特别的方便,再也不操心浏览器兼容问题了.用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧. 首先写一个XML文件.data.xml <?xml ...

  3. Ajax实现的城市二级联动二

    上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option> ...

  4. Ajax实现的城市二级联动一

    前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"> < ...

  5. 使用jquery.ajax实现省市的二级联动(SSH架构)

    首先实现jquery ajax的二级联动 要下载个jquery.js 我在这里就不准备了 自行百度下载 背景介绍:通过部门的ID来查找部门下的所有班级 我实现二级联动的思路是:先查询所有部门 显示在页 ...

  6. Ajax实现的城市二级联动三

    把之前2篇整合在一起 1.html <select id="province"> <option>请选择</option> </selec ...

  7. AJAX调用数据，滚动到底部

    最近一个小项目里面,需要使用AJAX去拉取数据,并且直接显示最后一条信息,也就是滚动到底部.实现脚本如下: var scrollHeight = $('.txtBox3').prop("sc ...

  8. 页面上AJAX调用数据

    <div class="section page9" data-page='9'> <div class="global-section-wrp med ...

  9. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

随机推荐

  1. 初识java这个小姑娘（一）

    忽然想起这样一个场景:那时我还是小学三年级的一个小学生,上课的铃声响起,文艺委员起头,大家开始胡乱的开始唱歌,"让我们荡起双桨,小船儿推开波浪",歌声在一片稚气中慢慢停止.我们的语 ...

  2. js 哈希路由原理实现

    在 js 中,有一种方法,可以在不刷新页面的情况下,页面的内容进行变更,ajax 是一种,这里介绍另一种,就是 哈希路由原理 先看一个简单的路由和页面内容关联的例子,要实现两个功能: 1.1. 浏览器 ...

  3. 用nodejs把目录下所有用px做单位的css文件转化为用rem做单位的css文件

    20171105 1211/星期日 公司为了更好适配手机端,以前用px做单位的css文件,全部需要转化为用rem做单位,目前是1rem=37.5px;开发新项目时,还是用习惯的px写样式代码,完成UI ...

  4. google开源服务器apprtc的搭建

    本文参考网帖: http://www.jianshu.com/p/c55ecf5a3fcf http://io.diveinedu.com/2015/02/05/%E7%AC%AC%E5%85%AD% ...

  5. java学习笔记之字符流文件复制

    字符文件复制 FileReader fr =new FileReader("b.txt");//绑定源文件 FileWriter fw= new FileWriter(" ...

  6. json解析—Gson以及GsonFormat插件的运用

    最近开始慢慢做毕业设计了,遇到一个功能是获取天气预报的,我选择的是和风天气的api,返回的是JSON数据,所以遇到了解析JSON的问题 首先简单说下JSON,JSON(JavaScript Objec ...

  7. Implement Queue using Stacks（用栈实现队列）

    Implement the following operations of a queue using stacks. push(x) -- Push element x to the back of ...

  8. 一起talk C栗子吧（第一百二十六回：C语言实例--statickeyword）

    各位看官们,大家好,上一回中咱们说的内置宏的样例.这一回咱们说的样例是:static关键字. 闲话休提.言归正转. 让我们一起talk C栗子吧! 看官们,C语言提供了static关键字.它常常出如今 ...

  9. POJ 2533 Longest Ordered Subsequence（DP 最长上升子序列）

    Longest Ordered Subsequence Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 38980   Acc ...

  10. redis 简单安装使用

    官方站点:http://redis.io/ 官方下载:http://redis.io/download 能够依据须要下载不同版本号 windows版:https://github.com/mythz/ ...