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

                    }

                })

            })

第二级联动

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

             $("#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调用数据案例，二级联动的更多相关文章

Ajax——ajax调用数据总结
在做人事系统加入批量改动的功能中,须要将前台中的数据传给后台.后台并运行一系列的操作. 通过查询和学习了解到能够通过ajax将值传入到后台,并在后台对数据进行操作. 说的简单点.就是ajax调用后台的 ...
多级联动系列——ajax调用XML实现三级联动
ajax 使用起来特别的方便,再也不操心浏览器兼容问题了.用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧. 首先写一个XML文件.data.xml <?xml ...
Ajax实现的城市二级联动二
上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option> ...
Ajax实现的城市二级联动一
前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"> < ...
使用jquery.ajax实现省市的二级联动(SSH架构)
首先实现jquery ajax的二级联动要下载个jquery.js 我在这里就不准备了自行百度下载背景介绍:通过部门的ID来查找部门下的所有班级我实现二级联动的思路是:先查询所有部门显示在页 ...
Ajax实现的城市二级联动三
把之前2篇整合在一起 1.html <select id="province"> <option>请选择</option> </selec ...
AJAX调用数据，滚动到底部
最近一个小项目里面,需要使用AJAX去拉取数据,并且直接显示最后一条信息,也就是滚动到底部.实现脚本如下: var scrollHeight = $('.txtBox3').prop("sc ...
页面上AJAX调用数据
<div class="section page9" data-page='9'> <div class="global-section-wrp med ...
在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询
在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

随机推荐

企业级缓存系统varnish应用
场景随着公司业务快速发展,公司的电子商务平台已经聚集了很多的忠实粉丝,公司也拿到了投资,这时老板想通过一场类似双十一的活动,进行一场大的促销,届时会有非常多的粉丝访问网站,你的总监与市场部门开完会后 ...
HDU1171--01背包
Big Event in HDU Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
获取或设置当前窗口contextmenu事件的事件处理函数
在浏览器中鼠标右键点击会显示默认的自带的菜单,那么如何禁止和更改呢? 1) 禁止右键 window.oncontextmenu = funcRef; //funcRef是个函数引用列子: w ...
sendGrid 纯文本的换行问题
项目中使用sendGrid发送邮件,并且要求纯文本格式,遇到了无法换行的问题(使用\r\n). 解决方案: 1. 在换行符前加空格(官方推荐的做法 https://sendgrid.com/docs/ ...
IP协议和网络传输中的封装与分用。
关于七层模型和四层模型可以参考这个:http://www.cnblogs.com/xcywt/p/5027277.html 因为四层模型用的比较多,这里只拿四层模型来分析. 1.四层模型中的最下层是链 ...
mongoDB之数据类型
mongoDB之数据类型 Object ID :文档的id String: 字符串,最常用,必须是utf-8 Boolean:布尔值,true 或者false Integer:整数 Double:浮 ...
Asteroids!-裸的BFS
G - Asteroids! Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Subm ...
Android官方技术文档翻译——Gradle 插件用户指南（5）
昨晚把第五章未译完的几句话攻克了.只是第六章没怎么译,明后天又是周末,假设周一前第六章翻译完的话,周一再发第六章. 本文译自Android官方技术文档<Gradle Plugin User Gu ...
NHibernate之旅(13)：初探马上载入机制
本节内容引入马上载入实例分析 1.一对多关系实例 2.多对多关系实例结语引入通过上一篇的介绍,我们知道了NHibernate中默认的载入机制--延迟载入.其本质就是使用GoF23中代理模式 ...
Codeforces 29D Ant on the Tree 树的遍历 dfs序
题目链接:点击打开链接题意: 给定n个节点的树 1为根则此时叶子节点已经确定最后一行给出叶子节点的顺序目标: 遍历树并输出路径.要求遍历叶子节点时依照给定叶子节点的先后顺序訪问. 思路: 给每 ...

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

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

随机推荐

热门专题