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无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...
随机推荐
- JavaWeb框架_Struts2_(六)----->Struts2的输入校验
1. 输入校验章节目录 输入校验概述 客户端校验 服务器端校验 手动编程校验 重写validate方法 重写validateXxx()方法 输入校验流程 校验框架校验 Struts2 内置的校验器 常 ...
- 自己动手编写IOC框架（四）
终于到了激动人心的时刻了,首先感谢小伙伴们的阅读,如果能多点评论,多点探讨就更好了,没有交流让我觉得我写的东西只有标题有点价值,内容只是在浪费大家的时间.为了泪滴下周能写下一个框架orm,请小伙伴们能 ...
- HTTP / 1.1 RFC from W3C
这是一篇关于http协议的学习资料: HTTP / 1.1 RFC: https://www.w3.org/Protocols/rfc2616/rfc2616.html HTTP协议的完整资料,请参考 ...
- 51Nod 1256 乘法逆元 扩展欧几里得
基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 给出2个数M和N(M < N),且M与N互质,找出一个数K满足0 < K < N且K * M % N = ...
- iOS 视频直播弹幕的实现
弹幕,并不是一个多么复杂的功能. 1.弹幕的实现性分析 首先,从视觉上明确当前弹幕所具有的功能 从屏幕右侧滑入左侧,直至完全消失 不管是长的弹幕,还是短的弹幕,速度一致(可能有的需求是依据弹幕长度,调 ...
- C#设计模式之十九状态模式（State Pattern）【行为型】
一.引言 今天我们开始讲"行为型"设计模式的第六个模式,该模式是[状态模式],英文名称是:State Pattern.无论是现实世界,还是面向对象的OO世界,里面都有一个东西, ...
- Date( )方法 章节中，你可以查看更多关于日期转换为字符串的函数
在 Date 方法 章节中,你可以查看更多关于日期转换为字符串的函数: 方法 描述 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31). getDay() 从 Date 对象 ...
- PDFBox创建并打印PDF文件, 以及缩放问题的处理.
PDFBox带了一些很方便的API, 可以直接创建 读取 编辑 打印PDF文件. 创建PDF文件 public static byte[] createHelloPDF() { ByteArrayOu ...
- ssm整合（基于xml配置方式）
本文是基于xml配置的方式来整合SpringMVC.Spring和Mybatis(基于注解的方式会再写一篇文章),步骤如下: (1)首先自然是依赖包的配置文件 pom.xml <project ...
- 最短路算法之Dijkstra算法通俗解释
Dijkstra算法 说明:求解从起点到任意点的最短距离,注意该算法应用于没有负边的图. 来,看图. 用邻接矩阵表示 int[][] m = { {0, 0, 0, 0, 0, 0}, {0, 0, ...