主要功能流程介绍

循环获取列表数据

点击列表数据进入详情页

点击报名参加弹出报名成功提示框

点击提示框中的确定按钮，跳回列表页

代码实现流程和解说

一、列表页

1、访问链接list.php时判断是个人计算机端还是客户端

$ user _ agent _ arr=mall _ get _ user _ agent _ arr()；if(MALL _ UA _ IS _ PC==1){/* * * * * * * * * * * * PC版************包含一次' ./list-PC。PHP '；} else {//* * * * * * * * * * * * * WAP版************包含一次' ./list-WAP。PHP '；} 2、如果是无线应用协议版就跳转到list-wap.php页面，载入list.tpl.htm页面

$ PC _ WAP=' WAP/'；$ TPL=$ my _ app _ pai-GetView(TASK _ TEMPLATES _ ROOT .$pc_wap .贸易/清单。第三方物流。htm’)；3、list.tpl.htm页面进行渲染模板

超文本标记语言

div class=' page-view ' data-role=' page-container ' div class=' sales-list-page ' div id=' render-ele '/div/div/divJS

$(function() //渲染模块{ //请求服务器端编程语言(专业超文本预处理器的缩写)的url var TRADE_AJAX_URL=window .$ _ _ Ajax _ domain ' get _ trade _ list。PHP '；//获取已经封装在list.js里面的一个对象list _ item _ class var list _ item _ class=require('././././模块/列表/列表。js’)；//获取模板块var template=__inline(' ./list-itemtmpl ')；var list _ obj=new list _ item _ class({ ele : $(' # render-ele ')，//渲染数据到编号为渲染元素中url : TRADE_AJAX_URL，//请求数据连接模板：模板/渲染的模板});});list-item.tmpl模板内容（循环的列表内容)

div class='项目包装' #每个列表} } { { # if is _ registry } } a href=' ./detail.php？topic _ id={ { id } } state=is _ enter " { else } } a href=' ./detail.php？topic _ id={ { id } } state=no _ enter“{ if }/div class=' item ui-border-b ' div class=' img-item ' I class=' img ' style=' background-image : URL({ { img } })；”/I/div class=' text-item ' div class=' txt-con-1 ' H3 class=' title f14 ' { title } }/H3 p class=' txt F10 color-999 '所属品类：{ { type } }/p/div/div class=' txt-con-2 ' span class=' color-333联接" { registry _ text } }/span/div/div/div/a { {/每个}}/div4、list.js进行数据处理，仅是对象的部分方法，具体的方法请自行写。

_ self。Ajax _ obj=实用程序。Ajax _ request({ URL : self。send _ URL，data : self.ajax_params，beforeSend :函数(){self ._发送=真实自我.$加载=$ .正在加载({ content: '加载中.'});},成功：函数（数据){自我._发送=false//获取数据var list _ data=数据。结果数据。列表；console.log(数据);//渲染前处理事件自我$ El。触发器(' list _ render : before '，[self .$list_container，data])；_self .$正在加载。正在加载(“隐藏”)；//是否有分页自我。has _ next _ page=数据。结果数据。has _ next _ page//无数据处理if(！list _ data . length page==1){ 0异常。渲染(自我).$render_ele[0]，{ })；自我$ load _ more。addCLaSS(' fn-hide ')；返回；}else{ self .$ load _ more。移除类(' fn-hide ')；}//把数据放入模板var html _ str=self。模板({ list : list _ data })；//插入渲染列表自我$ list _ container。追加(html _ str)；//渲染后处理事件自我$ El。触发器(' list _ render : after '，[self .$list_container，data，$(html _ str)]；自我。setup _ event()；},错误：函数(){self ._发送=假自我.$正在加载。正在加载(“隐藏”)；$.提示({content: '网络异常，stayTime:3000，键入： ' warn ' })；}})5、get_trade_list.php接收到前端页面发过来的请求，然后进行数据收集处理最终返回数据给前台页面

//接收参数$ page=int val($ _ INPUT[' page '])；如果(空($ page)){ $ page=1；}//分页使用的page _ count $ page _ count=5；if($ page 1){ $ limit _ start=($ page-1)*($ page _ count-1)；} else { $ limit _ start=($ page-1)* $ page _ count；}$limit='{$limit_start}，{ $ page _ count } '；//请求数据库的借口$ sales _ list _ obj=PoCO :3360单吨(' pai _ topic _ class ')；$ ret=$ sales _ list _ obj-get _ task _ list(false ' '，' id DESC '，$ limit)；//输出前进行过滤最后一个数据，用于真实输出$ rel _ page _ count=4；$ has _ next _ page=(count($ ret)$ rel _ page _ count)；if($ has _ next _ page){ array _ pop($ ret)；} $ output _ arr[' page ']=$ page；$ output _ arr[' has _ next _ page ']=$ has _ next _ page；$ output _ arr[' list ']=$ ret；//输出数据mall_mobile_output($output_arr，false)；6、前端页面接收到get_trade_list.php返回的数据，从而进行判断将数据库的内容显示在前台页面中。模板输出

$ TPL-输出()；详情页

1、点击列表页进入详情页(detail.php)

detail.php页面接收列表传过来的数据

//接收目录传过来的参数$ topic _ id=int val($ _ INPUT[' topic _ id '])；$ state=$ _ INPUT[' state ']；如果(空($ topic _ id)){标头('位置： '，/list。PHP’)；}//数据库借口$ trade _ detail _ obj=PoCO :3360 singleton(' pai _ topic _ class ')；$ ret=$ trade _ detail _ obj-get _ task _ detail($ topic _ id，$ yue _ log in _ id)；2、判断是个人计算机端还是客户端（类似列表页)

3、跳转到detail-wap.php加载模板detail.tpl.htm同时也带参数过去

$ PC _ WAP=' WAP/'；$ TPL=$ my _ app _ pai-GetView(TASK _ TEMPLATES _ ROOT .$pc_wap .贸易/细节。第三方物流。htm’)；//模板附带以下三个参数到detail.tpl.htm中$tpl-assign('ret '，$ ret)；$tpl-assign('topic_id '，$ topic _ id)；$tpl-assign('state '，$ state)；4、页面引用对象浸水使柔软中的字段

div class=' sales-detail-page ' div class=' item-wrap ' div class=' item-1 item ' div class=' img-item ' I class=' img ' img src=' http : { ret。img } '//I/div class=' txt-item ' H3 class=' title F16 color-333 FB ' { ret。title }/h3p class=' sign-in-txt color-666 ' { ret。注册表文本}/p/div/div生意机会详情/h3div class=' txt-con f14 color-666 ' p class=' txt ' { ret。content }/p/div/div/class=' sign-name-item '！-如果状态=' is _ enter '-button class=' ui-button-submit had-joined ' span class=' ui-button-content '已参加/span/按钮！-ELSE-button class=' ui-button-submit ' id=' submit ' span class=' ui-button-content '报名参加/span/按钮！- ENDIF - /div/div5、点击报名参加按钮进行数据处理

var _ self={ }；$btn.on('click '，function(){ var data={ topic _ id : { ret }。id } }实用程序。Ajax _ request({ URL :窗口.$ _ _ Ajax _ domain ' add _ task _ registry _ trade。PHP '，数据：数据，类型： 'POST '，缓存： false，之前发送：函数(){ _ self .$加载=$ .正在加载({content : '发送中.'});},成功：函数（数据){ _self .$正在加载。正在加载(“隐藏”)；//请求成功后显示成功报名提示框，点击报名提示框确定按钮跳回列表页面if(数据。结果数据。结果==1){ var dialog=utility。对话框({ ' title ' : ' '，content' : '提交成功，点击确定返回，' buttons' : ['确定']});dialog.on('confirm '，function(event，args){ window。位置。href=文档。推荐人；});返回；}},错误：函数(){ _self .$正在加载。正在加载(“隐藏”)；$.提示({content : '网络异常，stayTime : 3000，键入： ' warn ' })；} });});以上这篇埃阿斯获取数据然后显示在页面的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。