跨域請求並展示數據、二級聯動
阿新 • • 發佈：2017-09-11
ket trap index part str payment rto ces []
<!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+‘ ‘+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+‘ ‘+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>
跨域請求並展示數據、二級聯動