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>

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

_self.ajax_obj = utility.ajax_request 
        ({
            url : self.send_url,data : self.ajax_params,beforeSend : function() {
                self._sending = true;
                _self.$loading = $.loading
                ({
                    content:'加载中...'
                });

            },success : function(data) {
                self._sending = false;
                //获取数据
                var list_data = data.result_data.list;
                console.log(data);
                //渲染前处理事件
                self.$el.trigger('list_render:before',[self.$list_container,data]);

                _self.$loading.loading("hide");

                //是否有分页
                self.has_next_page = data.result_data.has_next_page;

                // 无数据处理 
                if(!list_data.length && page == 1)
                {
                    abnormal.render(self.$render_ele[0],{});

                    self.$load_more.addClass('fn-hide');

                    return;
                }
                else
                {
                    self.$load_more.removeClass('fn-hide');
                }

                //把数据放入模板
                var html_str = self.template
                ({
                    list : list_data
                });
                //插入渲染列表
                self.$list_container.append(html_str);
                //渲染后处理事件
                self.$el.trigger('list_render:after',data,$(html_str)]);

                self.setup_event();
            },error : function() {
                self._sending = false;
                _self.$loading.loading("hide");
                $.tips
                    ({
                        content:'网络异常',stayTime:3000,type:'warn'
                    });
            }
        })

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

// 接收参数
$page = intval($_INPUT['page']);



if(empty($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::singleton ( '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->output();

详情页

1、点击列表页进入详情页（detail.PHP）
detail.PHP页面 接收 列表传过来的数据

//接收list传过来的参数
$topic_id =  intval($_INPUT['topic_id']);
$state = $_INPUT['state'];

if (empty($topic_id)) 
{
    header("location: ".'./list.PHP');
}

//数据库借口
$Trade_detail_obj = POCO::singleton ( 'pai_topic_class' );
$ret = $Trade_detail_obj->get_task_detail($topic_id,$yue_login_id);

2、判断是pc端还是客户端（类似列表页）
3、跳转到detail-wap.PHP加载模板detail.tpl.htm同时也带参数过去

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

//模板附带以下三个参数到detail.tpl.htm中
$tpl->assign('ret',$ret);
$tpl->assign('topic_id',$topic_id);
$tpl->assign('state',$state);

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

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

                <div class="item-3 item">
                    <div class="txt-item">
                        <h3 class="title f14 color-333 fb">生意机会详情</h3>
                        <div class="txt-con f14 color-666">
                            <p class="txt">{ret.content}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div 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 -->
            </div>
        </div>

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

var _self = {};
        $btn.on('click',function() {
            var data  =  
            {
                topic_id : {ret.id}
            }
            utility.ajax_request({
                url : window.$__ajax_domain+'add_task_enroll_Trade.PHP',data : data,type : 'POST',cache : false,beforeSend : function() {
                    _self.$loading = $.loading({
                        content : '发送中.....'
                    });
                },success : function(data) {
                    _self.$loading.loading("hide");
                    //请求成功后显示成功报名提示框，点击报名提示框确定按钮跳回列表页面
                        if (data.result_data.result==1) 
                        {
                                var dialog = utility.dialog
                                        ({
                                            "title" : '',"content" : '提交成功，点击确定返回',"buttons" : ["确定"]
                                        });
                                                 dialog.on('confirm',function(event,args) {
                     window.location.href = document.referrer;
              });

                    return;
              }





                },error : function() {
                    _self.$loading.loading("hide");
                    $.tips({
                        content : '网络异常',stayTime : 3000,type : 'warn'
                    });
                }

            });

        });