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

最新推荐文章于 2024-11-08 20:55:17 发布

o梧桐o

最新推荐文章于 2024-11-08 20:55:17 发布

阅读量342

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识

本文链接：https://blog.youkuaiyun.com/cx1_cx1/article/details/103188135

前端知识专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解了前端开发中常见的三层设计模式，从静态页面初始化、AJAX数据交互到数据回显全过程，通过具体实例展示了如何使用jQuery进行页面元素操作、数据请求及处理，并实现了时间格式的转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

静态页面 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;
}