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无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...
随机推荐
- 快速上手使用Maven
maven的相关命令 mvn archetype:create :创建 Maven 项目 mvn compile :编译源代码(编译到target文件夹中) mvn test-compile :编译测 ...
- CCF-201503-3-节日
问题描述 试题编号: 201503-3 试题名称: 节日 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 有一类节日的日期并不是固定的,而是以"a月的第b个星期c&q ...
- php提供的对称加密算法
KEY 是之前定义的常量 Mcrypt::encrypt(); Mcrypt::decrypt(); defined('ROOT') or exit('Access Denied'); class M ...
- linux 安装 cenos7 和 jdk
安装一个虚拟机安装cenos7 版本的 安装完虚拟机后必备工具 第一步. 配置网路 设置桥接网路设置静态网络参考 下面博文 http://www.cnblogs.com/Jerry1104/p/758 ...
- python学习之路day2
模块学习: 标准库: os: 第三方库:
- 大数据学习系列之二 ----- HBase环境搭建(单机)
引言 在上一篇中搭建了Hadoop的单机环境,这一篇则搭建HBase的单机环境 环境准备 1,服务器选择 阿里云服务器:入门型(按量付费) 操作系统:linux CentOS 6.8 Cpu:1核 内 ...
- NGUI_概述
序言:这是张三疯第一次开始NGUI插件的学习,刚开始学习,肯定有很多漏洞,后期会及时的补上的. 希望大家可以见谅,希望大佬多多指教. 一.什么是NGUI: NGUI是严格遵循KISS原则并用C#编写的 ...
- js图片懒加载（滚动加载）是否生效
一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
- weex加入iconfont
weex加入图标可能是项目开发中最头疼的事情了,还好有 阿里巴巴矢量图标库解决了开发时的图标问题,下面我们一起来踩坑吧<text class="left"></ ...
- gcc/g++ 命令的经常使用选项
gcc/g++ 命令的经常使用选项格式(选项 解释) -o FILE 指定输出文件名称.在编译为目标代码时,这一选项不是必须的.假设FILE没有指定,缺省文件名称是a.out. -c 仅仅编译生成目标 ...