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

主要功能流程介绍

循环获取列表数据

点击列表数据进入详情页

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

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

代码实现流程和解说

一、列表页

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

$user_agent_arr = mall_get_user_agent_arr();if(MALL_UA_IS_PC == 1){  //****************** pc版 ******************  include_once './list-pc.php';}else{  //****************** wap版 ******************  include_once './list-wap.php';} 

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

$pc_wap = 'wap/';$tpl = $my_app_pai->getView(TASK_TEMPLATES_ROOT.$pc_wap.'trade/list.tpl.htm');

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

HTML

<div class="page-view " data-role="page-container">    <div class="sales-list-page">      <div id="render-ele"></div>    </div>  </div>

JS

$(function()  // 渲染模块  {    //请求php的url    var TRADE_AJAX_URL = window.$__ajax_domain + 'get_trade_list.php';    //获取已经封装在list.js里面的一个对象list_item_class    var list_item_class = require('../../../../modules/list/list.js');    //获取模板块    var template = __inline('./list-item.tmpl');    var list_obj = new list_item_class({      ele : $("#render-ele"),//渲染数据到id为render-ele中      url : TRADE_AJAX_URL,//请求数据连接      template : template //渲染的模板    });  });

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

<div 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}}    <div class="item ui-border-b" >      <div class="img-item">        <i class="img" style="background-image: url({{img}});">        </i>      </div>      <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 join-in ">            {{ enroll_text }}           </span>        </div>      </div>    </div>  </a>  {{/each}}</div>