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>

JS

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获取数据然后显示在页面的实现方法的详细内容，更多请关注Gxl网其它相关文章！