Ajax获取数据然后显示在页面的实现方法

来源：库升汽车网

下面我就为大家带来一篇Ajax获取数据然后显示在页面的实现方法。现在就分享给大家，也给大家做个参考。

主要功能流程介绍

循环获取列表数据

点击列表数据进入详情页

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

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

代码实现流程和解说

一、列表页

1、访问链接list.php时判断是pc端还是客户端

2、如果是wap版就跳转到 list-wap.php 页面，载入 list.tpl.htm页面

3、list.tpl.htm 页面进行渲染模板

HTML

<p class="page-view " data-role="page-container">

 <p class="sales-list-page">
 <p id="render-ele"></p>
 </p>

 </p>

list-item.tmpl模板内容（循环的列表内容）

<p class="item-wrap">
 {{#each list}}
 {{#if is_enroll}}
 <a href="./detail.php?topic_id={{id}}&state=is_enter">
 {{else}}
 <a href="./detail.php?topic_id={{id}}&state=no_enter">
 {{/if}}
 <p class="item ui-border-b" >
 <p class="img-item">
 <i class="img" style="background-image: url({{img}});">

 </i>
 </p>
 <p class="text-item">
 <p class="txt-con-1">
 <h3 class="title f14">{{title}}</h3>
 <p class="txt f10 color-999">所属品类：{{type}}</p>

 </p>
 <p class="txt-con-2">
 <span class="color-333 join-in ">
 {{ enroll_text }} 
 </span>

 </p>
 </p>
 </p>
 </a>
 {{/each}}
</p>

4、list.js进行数据处理，仅是对象的部分方法，具体的方法请自行写。

5、get_trade_list.php接收到前端页面发过来的请求，然后进行数据收集处理最终返回数据给前台页面

输出前进行过滤最后一个数据，用于真实输出 $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返回的数据，从而进行判断将数据库的内容显示在前台页面中。模板输出

详情页

1、点击列表页进入详情页（detail.php）

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

2、判断是pc端还是客户端（类似列表页）

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

4、页面引用对象ret中的字段

<p class="sales-detail-page">
 <p class="item-wrap">
<p class="item-1 item">
 <p class="img-item">
<i class="img" >
<img src="{ret.img}"/>
</i>
 </p> 
 <p class="txt-item">
<h3 class="title f16 color-333 fb">{ret.title}</h3>
<p class="sign-in-txt color-666">
 {ret.enroll_text}
</p>
 </p>
</p>

<p class="item-3 item">
 <p class="txt-item">
<h3 class="title f14 color-333 fb">生意机会详情</h3>
<p class="txt-con f14 color-666">
 <p class="txt">{ret.content}</p>
</p>
 </p>
</p>
 </p>
 <p class="sign-name-item">
 <!-- IF state = "is_enter" -->
<button class="ui-button-submit had-joined">
 <span class="ui-button-content">已参加</span>
</button>
 <!-- ELSE -->
 <button class="ui-button-submit" id="submit">
<span class="ui-button-content">报名参加</span>
 </button>
 <!-- ENDIF -->
 </p>
</p>

5、点击报名参加按钮进行数据处理

上面是我整理给大家的，希望今后会对大家有帮助。

Ajax请求和Filter配合案例解析

解决AJAX请求中含有数组的办法

Ajax解决缓存的5种方法总结

显示全文

全部频道

Ajax获取数据然后显示在页面的实现方法