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无刷新方式使用三级联动调出的数据进行二级查询但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

随机推荐

idea从git上拉取并管理项目
1:idea从git上拉取项目 (1)FILE --> New --> Project from Version Control --> Git (2):输入项目的Https SSH ...
C#中StreamReader读取中文时出现乱码问题总结
之前有一篇文章" C#读取及写入配置文件教程"(http://blog.csdn.net/lisenyang/article/details/47291083)当中有一个问题就是在 ...
ado 字符串变量
这次变量主要针对 Mfc 的 Cstring 类型的变量(前面VC 链接Access 数据库插入变量到表) 思路; 1 把cstring 类型转为 string 2 string 转 char 数 ...
在Intellij里使用Erlang依赖库
这里以protobuffs为例,记录一下环境的配置,发现这种东西中文的资料真的不多,无论是分享还是记录都是很好的 1.创建一个文件夹名use_proto, 配置rebar.config文件如下: {d ...
Tencent社会招聘scrapy爬虫 --- 已经解决
1.用 scrapy 新建一个 tencent 项目 2.在 items.py 中确定要爬去的内容 # -*- coding: utf- -*- # Define here the models fo ...
HBase：Shell
HBase shell commands As told in HBase introduction, HBase provides Extensible jruby-based (JIRB) she ...
[.Net跨平台]部署DTCMS到Jexus遇到的问题及解决思路---部署
上一篇我们环境已经准备完成,此时可以部署了,我们就以dtcms作为例子,http://bbs.dtcms.net/forum.php?mod=viewthread&tid=2420&e ...
javascript中的双向绑定
阅读目录一:发布订阅模式实现数据双向绑定二:使用Object.defineProperty 来实现简单的双向绑定. 前言: 双向数据绑定的含义:可以将对象的属性绑定到UI,具体的说,我们有一个对象 ...
Python 安装包的导入
1.安装适合的pip python安装pip的命令: python -m pip install --upgrade pip安装Python包,的确是pip最为方便了,简单快捷,因为它直接是从pypi ...
Vagrant安装完lnmp后，配置linux和windows共享文件并配置虚拟主机访问项目
虚拟机目录下的Vagrantfile文件是vagrant的配置文件,如果想把虚拟机当作一台服务器,可以通过ip访问,需要修改配置文件进行配置. (1)第一步:打开虚拟机目录下的Vagrantfile文 ...

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

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

随机推荐

热门专题