跨域请求并展示数据二级联动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨域请求并展示数据二级联动相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于跨域请求并展示数据二级联动的主要内容，如果未能解决你的问题，请参考以下文章