题目：请针对移动端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. SubTool 电影字幕下载程序

    项目地址 https://github.com/backtracker/SubTool 程序说明 作为一个高清电影爱好者,找字幕的痛苦懂的人自然会懂.我在网上找了很久,并没有找到好用的字幕下载程序,于 ...

  2. “玲珑杯”ACM比赛 Round #22 E 贪心，脑洞

    1171 - 这个E大概是垃圾桶捡来的 Time Limit:2s Memory Limit:128MByte Submissions:138Solved:45 DESCRIPTION B君在做 CO ...

  3. Servlet实践--留言板-v1

    功能介绍: 由三个jsp页面组成,在doGet中根据请求URL中的请求参数不同,跳转到不同的页面: 页面1:显示整个留言板列表 页面2:创建留言页面(包括用户.主题.内容和上传文件) 页面3:在查看单 ...

  4. 《RabbitMQ Tutorial》译文 第 3 章 发布和订阅

    原文来自 RabbitMQ 英文官网的教程(3.Publish and Subscribe),其示例代码采用了 .NET C# 语言. In the previous tutorial we crea ...

  5. c# 初识WPF

    WPF,全名是Windows Presentation Foundation,是微软在.net3.0 WinFX中提出的.WPF是对Direct3D的托管封装,它的图形表现依赖于显卡.当然,作为一种更 ...

  6. JAVA中静态修饰符static的学习（初学）

    静态修饰符static,用于修饰类中的成员变量和成员函数. 用static修饰的成员变量也可叫做类变量. 什么时候使用静态 什么时候定义静态成员变量?     当对象中出现共享数据时,将该数据定义为静 ...

  7. Codeforces Round #257 (Div. 2) A. Jzzhu and Children（简单题）

    题目链接:http://codeforces.com/problemset/problem/450/A ------------------------------------------------ ...

  8. Javascript实现简单的下拉二级菜单

    在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/ <span style="font-size:14px;"& ...

  9. Android setContentView方法解析（一）

    在Activity的生命周期onCreate中.我们一般都习惯性的调用setContentView(int layoutResID)方法,把布局文件载入到页面上来.以下我们就来通过源代码一步步的分析怎 ...

  10. 导出Excel1 - 项目分解篇

    我们在全部的MIS系统(信息管理系统)中都能见到他.所以我们把这个通用功能提出来. 项目名称:车辆信息管理系统(中石化石炼) 项目负责人:xiaobin 项目时间:2006.12 - 2007.2 E ...