前端三层调用方式+回调集合的循环展示

前端三层设计的基本调用顺序

静态页面 t —> ajax发送数据到后台 s —> 数据回调 v

1t、页面初始化

$(function(){
		fkwps.findOrderList();  页面初始化函数,获取订单列表
	})

2s、ajax向后台发送数据、并调用后台接口

fkwps.findOrderList= function(){
	$.ajax({
		type : "POST",
		url : fkwps.url.order.getOrderList,	//链接后台接口地址
		dataType : 'json',
		success : function(data) {
			//判断code值,回显数据
			if(data.code == 200){
				fkwps.showOrderDetails(data.data);	//调用回调函数、传递后台返回的参数
			}else if(data.code == 305){
				layer.msg("登录失效");
				//延迟加载
				setTimeout(function(){
					window.location.href='/fkwps/user/t/login.html';
				},1000)
			}
		}
	});
}

3v、数据回显

fkwps.showOrderDetails = function(data){
	var html="";		// 定义html
	for(var i in data){		// 循环返回的data集合
		console.log(data[i]);		//前台控制台打印集合中的每一个数据
		var orderTime = fmtTimeView(data[i].orderTime);	 // 转换时间格式
		html = '<li>' + '<div class="ordertop">' + '<p class="clear">' 	  //拼接标签、利用data[i].字段名的方式,将数据循环填充到对应位置
			+ '<i>订单编号:</i><span>'+data[i].orderCode+'</span><b><span>下单时间  '+orderTime+'</span></b></p></div>'
			+ '<div class="ordermiddle clear"> ' + '<img src="'+data[i].fmImagerUrl+'" width="142" height="100" />' 
			+ '<div><p>'+data[i].productName+'</p><span>'+data[i].courseSection+'节课</span></div></div>'
			+ '<div class="orderbottom"><p class="clear"><i>支付成功,实付款:<strong>¥'+data[i].payAmount+'</strong></i><b>无物流</b></p></div></li>';
		
		$(".myorderlist").append(html);	//myorderlist 页面中的父标签,将拼接好的html代码,循环拼接到该标签内
	}
}



**时间格式转换**

function fmtTimeView(val){
	var result="";
	if(val==""||val==undefined){
		result= (new Date()).Format("yyyy-MM-dd hh:mm")
	}else{
		result = (new Date(val)).Format("yyyy-MM-dd hh:mm");
	}
	return result;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值