首页 > 其他 > 详细

跨域请求并展示数据、二级联动

时间:2017-09-11 00:24:49      阅读:316      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结账数据信息展示</title>
<script src="jquery-2.1.4/jquery.js"></script>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
</head>
<body>
<form>
<select name="serverPart" id="sp" class="form-control">
<option value="-1">请选择服务区</option>
</select>
<br>
<select name="serverPartShop" id="ssp" class="form-control">
<option value="-1">请选择门店</option>
</select>
</form>
<div id="message" class="text-center" style="font-size: 16px">

</div>
<script>
$(function(){
var idArr=[];
var shopIdArr=[];
var url1="http://test.eshangtech.com:6060/HighWay/Handler/handler_ajax.ashx?action_type=getTotalServerPart";
$.ajax({
url:url1,
type:"get",
dataType:‘json‘,
jsonp: ‘callback‘,
jsonpCallback: ‘jsonpCallback‘,
success:function(data){
var tpl=“”;
//var data1=eval(data);
//console.log(data.SERVERPARTObject[0].SERVERPART_NAME);
for(var i=0;i<data.SERVERPARTObject.length;i++){
tpl+=‘<option value=‘+i+‘>‘ +data.SERVERPARTObject[i].SERVERPART_NAME+‘&nbsp;&nbsp;&nbsp;&nbsp;‘+data.SERVERPARTObject[i].SERVERPART_CODE+
‘</option>‘;
idArr.push(data.SERVERPARTObject[i].SERVERPART_ID);
}
$("#sp").append(tpl);
console.log(idArr);
return idArr;
}
});
$("#sp").change(function (e,a) {
var index=this.value;
$.ajax({
url:‘http://test.eshangtech.com:6060/HighWay/Handler/handler_ajax.ashx?action_type=getServerPartShop&action_data=‘+idArr[index],
type:"get",
dataType:‘json‘,
jsonp: ‘callback‘,
jsonpCallback: ‘jsonpCallback‘,
success:function(data){
var tpl=“”;
//console.log(data.ServerPartShopObject[0].SHOPNAME);
//var data1=eval(data);
for(var i=0;i<data.ServerPartShopObject.length;i++){
tpl+=‘<option value=‘+i+‘>‘ +data.ServerPartShopObject[i].SHOPNAME+‘&nbsp;&nbsp;&nbsp;&nbsp;‘+data.ServerPartShopObject[i].SHOPCODE+
‘</option>‘;
shopIdArr.push(data.ServerPartShopObject[i].SERVERPARTSHOP_ID);
}
$("#ssp").append(tpl);
}
});
});
$("#ssp").change(function(){
var index=this.value;
console.log(index);
if(index>=0){
$.ajax({
url:‘http://test.eshangtech.com:6060/HighWay/Handler/handler_ajax.ashx?action_type=getServerPartEndaccount&action_data=‘+shopIdArr[index],
type:"get",
dataType:‘json‘,
jsonp: ‘callback‘,
jsonpCallback: ‘jsonpCallback‘,
success:function(data){
console.log(data.EndaccountObject[0]);
var tpl="";
for(var i=0;i<data.EndaccountObject.length;i++){
var a;
if(parseInt(data.EndaccountObject[i].TICKETCOUNT)!=0){
a=parseInt(data.EndaccountObject[i].TOTALSELLAMOUNT)/parseInt(data.EndaccountObject[i].TICKETCOUNT);
}else {
a=0;
}
//var a=parseInt(data.EndaccountObject[i].TOTALSELLAMOUNT)/parseInt(data.EndaccountObject[i].TICKETCOUNT);
tpl+=‘服务区名称:‘+data.EndaccountObject[i].SERVERPART_NAME+‘;<br/>‘+
‘门店名称:‘+data.EndaccountObject[i].SHOPNAME+‘;<br/>‘+
‘客单数量:‘+data.EndaccountObject[i].TICKETCOUNT+‘;<br/>‘+
‘销售数量:‘+data.EndaccountObject[i].TOTALCOUNT+‘;<br/>‘+
‘销售金额:‘+data.EndaccountObject[i].TOTALSELLAMOUNT+‘;<br/>‘+
‘长短款:‘+data.EndaccountObject[i].CASHPAY+‘;<br/>‘+
‘移动支付金额:‘+data.EndaccountObject[i].MOBILEPAYMENT+‘;<br/>‘+
‘结账时间:‘+data.EndaccountObject[i].ENDACCOUNT_DATE+‘;<br/>‘+
‘客单均价:‘+a.toFixed(2)+‘;<br/></br>‘;
}
$("#message").html(tpl).css({"width":"100vw",
"border":"1px solid red"});
}
});
}
})


})
</script>
</body>
</html>

跨域请求并展示数据、二级联动

原文:http://www.cnblogs.com/mark20170707/p/7502983.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!