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无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...
随机推荐
- thinkphp中各字母代表的发放和具体实例
hinkphp单字母函数使用指南A方法 A方法用于在内部实例化控制器,调用格式:A('[项目://][分组/]模块','控制器层名称') 最简单的用法: $User = A('User'); 复制代码 ...
- MySQL服务找不到了，navicat打不开数据库连接
今天打开Navicat看看连接名,突然发现连接不上了,打开服务发现MySQL服务不见了,所以手动安装了遍MySQL服务. 详细步骤如下: 1.管理员身份打开cmd,切换到MySQL安装目录下的bin目 ...
- POJ 1511 Invitation Cards 链式前向星+spfa+反向建边
Invitation Cards Time Limit: 8000MS Memory Limit: 262144K Total Submissions: 27200 Accepted: 902 ...
- 微信JS-SDK选择相册或拍照并上传PHP实现
理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果 通过微信js接口,调用底层程序. 需要引入js文件,并进行 ...
- 利用InfluxDB和Grafana搭建数据监测的仪表盘
InfluxDB的介绍及安装 InfluxDB是支持持续写入的时序数据库,常用于监测系统所需要的数据的存储. 官网的详细安装步骤 https://docs.influxdata.com/influxd ...
- oracle恢复已删除的表
drop 误删除表之后使用flashback table tablename to before drop 可恢复或者使用flashback table "BIN$gcfME7ObTx+n0 ...
- How to support comparators in our sort implementations?
上图是普林斯顿算法课part1.Mergesort章节给出的参考代码,可以发现这个代码有三处警告.造成的隐患就是我们无法在类型检查时发现送入sort()函数的数组元素类型和Comparator的泛型不 ...
- python 序列：字符串、列表、元组
python 序列:字符串.列表.元组 序列:包含一定顺序排列的对象的一个结构 内建函数:str() list() tuple() 可以使用str(obj)可以把对象obj转换成字符串 list( ...
- springMVC(1)---@RequestMapping详解
@RequestMapping详解 RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径.这句话,太熟悉了. ...
- jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法
原始form表单值获取方式(手动): $.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上 ...