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无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...
随机推荐
- Cracking the Coding Interview 题目分析笔记—— Array and String
1.Determine if a string has all unique characters learn: 为了减少空间利用率,其比较优秀的算法一般都适用位操作 返回值的命名方法,我们需要学习 ...
- P1040 加分二叉树
转自:(http://www.cnblogs.com/geek-007/p/7197439.html) 经典例题:加分二叉树(Luogu 1040) 设一个 n 个节点的二叉树 tree 的中序遍历为 ...
- nginx的基础应用（续）
nginx的基础应用(续) 一.简介 上一篇文章我们介绍了nginx的基础应用,其中讲到了nginx作为代理服务器的使用,但是漏了一个重要的,也是使用非常普遍的特性--负载均衡.今天,我们将这段内容补 ...
- Servlet与Jsp的结合使用实现信息管理系统二
PS:前面说了抽取框架的搭建,接着就要我们开始进入网址的时候就要查到全部信息并显示在首页,我们用到的MySql数据库,具体步骤是: 创建数据库,创建表,添加信息 项目中调入mysql的jar包 mys ...
- 【Keras】从两个实际任务掌握图像分类
我们一般用深度学习做图片分类的入门教材都是MNIST或者CIFAR-10,因为数据都是别人准备好的,有的甚至是一个函数就把所有数据都load进来了,所以跑起来都很简单,但是跑完了,好像自己还没掌握图片 ...
- NGUI_Button
十.按钮,Button 1.按钮的核心作用: 按钮能够接收单击并触发响应事件 按钮单击时能同时触发多个响应事件 按钮可以有普通.悬停.单击.禁用等多个状态的不同表现 广泛的说,按钮的核心在于接收事件 ...
- QT制作一个图片播放器
前言:使用qt制作了一个简单的图片播放器,可以播放gif.png等格式图片 先来看看播放器的功能(当然是很简陋的,没有很深入的设计): 1.点击图片列表中图片进行播放. 2.自动播放,播放的图片的间隔 ...
- svn服务器的搭建与使用一
转载出处 Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: ht ...
- C++ 函数对象
函数对象 c++中函数名后的()称为函数调用运算符.函数调用运算符也可以重载,如果某个类重载了函数调用运算符,则该类的实例就是一个函数对象.函数对象本身并不是很有用,但他们使得算法操作的参数化策略成为 ...
- 函数的作用域与this指向 --- 性能篇
紧接上一篇博文:js函数的作用域与this指向 先来说说this的作用于链,this后的属性或者方法在使用时是先从本实例中查找,如果找到就先返回,如果没找到就接着向上从原型链中查找,如果有多重继承关系 ...