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无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...
随机推荐
- MYSQL瓶颈
一般来说, 在使用的时候 性能从某个数值开始.突然大大下降,说明就到了瓶颈期. mysql 瓶颈有2种,一种是 cpu瓶颈 一种是 io瓶颈.cpu瓶颈多是由io引起. 而io可以通过 show ...
- [行业关键词] review code review
意思是 代码评审 或是 代码回顾 代码评审是指在软件开发过程中,通过对源代码进行系统性检查的过程.通常的目的是查找系统缺陷,保证软件总体质量和提高开发者自身水平. Code Review是轻量级 ...
- php简单实现发微博动态
首先,肯定是注册成为开发者新浪微博开放平台 选择网站应用,填写一些基本信息 填完后在'我的应用'中,会看到刚创建的应用信息,我们只是简单的测试一下,所以其他复杂的注册信息都不用填写,有这些就够了 很重 ...
- 【NOIP2014提高组】联合权值
https://www.luogu.org/problem/show?pid=1351 既然是一棵树,就先转化成有根树.有根树上距离为2的点对,路径可能长下面这样: 枚举路径上的中间点X. 第一种情况 ...
- cpci热插拔信号
cpci热插拔信号1 BD_SEL#信号.对外围板是输入,是个1对1信号,来自背板的热插拔控制电路输出.每一个槽一个独立信号.用于控制热插拔外围板的上电控制.不实现热插拔的在背板直接接地:2 HEAL ...
- 7、创建ROS msg和srv
一.msg和srv介绍 msg: msg文件使用简单的文本格式声明一个ROS message的各个域. 仅须要创建一个msg文件,就能够使用它来生成不同语言的message定义代码. srv:srv文 ...
- F01:金融学第一定律：时间的价值
很小的时候,我们就听大人们讲过:时间就是金钱. 长大了,也觉得这句话应该是对的.我们很珍惜时间,但是似乎没有看到金钱的急剧增加啊.总之,这是模糊,体验感又不强的一句话. 既然谈到时间的价值,价值最容易 ...
- Windows 10 安装 Docker for Windows
Docker for Windows是Docker社区版(CE)应用程序. Docker for Windows安装包包括在Windows系统上运行Docker所需的一切. 本主题介绍了预安装注意事项 ...
- redis中与key相关的命令
1.简单描述 redis本质上是一个key-value db,value可以有多种类型(string.hash.set.sorted set.list等),本章节不讲这些类型的命令,这里是讲跟key相 ...
- arm-linux-androideabi-4.8/prebuilt/darwin-x86_64/bin/arm-linux-androideabi-g++: Command not found 解决方法
执行下列命令时: ndk-build -j16 出现如下错误: Android NDK: WARNING: Ignoring unknown import directory: jni/../../. ...