前端三层设计的基本调用顺序:
静态页面 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;
}