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}}
        <