题目：请针对移动端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. C#开发Windows窗体应用程序的步骤

    使用C#开发应用程序时,一般包括创建项目.界面设计.设置属性.编写程序代码.保存项目.程序运行等6个步骤. 1．创建项目 在Visual Studio2017开发环境中选择“文件”→“新建”→“项目” ...

  2. 【javaFX学习】（二） 控件手册

    这里写的控件可能不是所有的控件,但是应该是比较齐全并足够用的了,后面还有图表类的,3d模型类,放在后面来写吧,太多了.javafx的功能比以前想象中的要强大.而且也很方便,所有的控件写完后再用Scen ...

  3. PHPstorm 函数时间注释的修改

    正常的PHPstorm里面函数方法的注释是没有动态时间设置的,但是看了PHP file里面有时间日期的注释,而PHP Function Doc Comment 却没有,让很多PHPer很头疼,今天在搜 ...

  4. html5的结构

    目录 一.新增的主体结构元素 1.1.article元素 1.2.section元素 1.3.nav元素 1.4.aside元素 1.5.time元素 1.6.pubdate元素 二.新增的非主体结构 ...

  5. 解决failed to push some refs to git

    Administrator@PC-20150110FGWU /K/cocos2d/yc (master) $ git push -u origin master To git@github.com:y ...

  6. admin密码重置方式

    1.在项目根目录下运行:python manage.py shell 2.重设密码 from django.contrib.auth.models import User user =User.obj ...

  7. python爬虫(七)_urllib2：urlerror和httperror

    urllib2的异常错误处理 在我们用urlopen或opener.open方法发出一个请求时,如果urlopen或opener.open不能处理这个response,就产生错误. 这里主要说的是UR ...

  8. ZOJ 3890 Wumpus

    Wumpus Time Limit: 2 Seconds      Memory Limit: 65536 KB One day Leon finds a very classic game call ...

  9. jquery 自定义选择器

    // HTML 代码 <body> <div id="divid1" class="divclass">白色</div> & ...

  10. node.js之路由，中间件，ge请求和post请求的参数

    一.路由 1.什么是路由 服务器需要根据不同的URL或请求来执行不一样的操作,我们可以通过路由来实现这个步骤 2.实现路由的方法 2.1.get请求访问网址时,做什么事 1 app.get(" ...