主頁(yè) > 知識(shí)庫(kù) > Ajax獲取數(shù)據(jù)然后顯示在頁(yè)面的實(shí)現(xiàn)方法

Ajax獲取數(shù)據(jù)然后顯示在頁(yè)面的實(shí)現(xiàn)方法
熱門標(biāo)簽：服務(wù)器配置 Mysql連接數(shù)設(shè)置 阿里云 銀行業(yè)務(wù) Linux服務(wù)器 電子圍欄 科大訊飛語(yǔ)音識(shí)別系統(tǒng) 團(tuán)購(gòu)網(wǎng)站

主要功能流程介紹

循環(huán)獲取列表數(shù)據(jù)

點(diǎn)擊列表數(shù)據(jù)進(jìn)入詳情頁(yè)

點(diǎn)擊報(bào)名參加彈出報(bào)名成功提示框

點(diǎn)擊提示框中的確定按鈕，跳回列表頁(yè)

代碼實(shí)現(xiàn)流程和解說(shuō)

一、列表頁(yè)

1、訪問(wèn)鏈接list.php時(shí)判斷是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版就跳轉(zhuǎn)到 list-wap.php 頁(yè)面，載入 list.tpl.htm頁(yè)面

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

3、list.tpl.htm 頁(yè)面進(jìn)行渲染模板

HTML

div class="page-view " data-role="page-container">

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

  /div>

JS

$(function()
  // 渲染模塊
  {
    //請(qǐng)求php的url
    var TRADE_AJAX_URL = window.$__ajax_domain + 'get_trade_list.php';
    //獲取已經(jīng)封裝在list.js里面的一個(gè)對(duì)象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"),//渲染數(shù)據(jù)到id為render-ele中
      url : TRADE_AJAX_URL,//請(qǐng)求數(shù)據(jù)連接
      template : template //渲染的模板
    });

  });

list-item.tmpl模板內(nèi)容（循環(huán)的列表內(nèi)容）

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進(jìn)行數(shù)據(jù)處理，僅是對(duì)象的部分方法，具體的方法請(qǐng)自行寫。

 _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;
//獲取數(shù)據(jù)
var list_data = data.result_data.list;
console.log(data);
//渲染前處理事件
self.$el.trigger('list_render:before',[self.$list_container,data]);

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

//是否有分頁(yè)
self.has_next_page = data.result_data.has_next_page;

// 無(wú)數(shù)據(jù)處理 
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');
}

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

self.setup_event();
  },
  error : function()
  {
self._sending = false;
_self.$loading.loading("hide");
$.tips
  ({
content:'網(wǎng)絡(luò)異常',
stayTime:3000,
type:'warn'
  });
  }
})

5、get_trade_list.php接收到前端頁(yè)面發(fā)過(guò)來(lái)的請(qǐng)求，然后進(jìn)行數(shù)據(jù)收集處理最終返回?cái)?shù)據(jù)給前臺(tái)頁(yè)面

// 接收參數(shù)
$page = intval($_INPUT['page']);



if(empty($page))
{
  $page = 1;
}

// 分頁(yè)使用的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}";



//請(qǐng)求數(shù)據(jù)庫(kù)的借口
$sales_list_obj = POCO::singleton ( 'pai_topic_class' );
$ret = $sales_list_obj-> get_task_list(false, '', 'id DESC', $limit);





// 輸出前進(jìn)行過(guò)濾最后一個(gè)數(shù)據(jù)，用于真實(shí)輸出
$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;

// 輸出數(shù)據(jù)
mall_mobile_output($output_arr,false);

6、前端頁(yè)面接收到get_trade_list.php返回的數(shù)據(jù)，從而進(jìn)行判斷將數(shù)據(jù)庫(kù)的內(nèi)容顯示在前臺(tái)頁(yè)面中。模板輸出

$tpl->output();

詳情頁(yè)

1、點(diǎn)擊列表頁(yè)進(jìn)入詳情頁(yè)（detail.php）

detail.php頁(yè)面 接收 列表傳過(guò)來(lái)的數(shù)據(jù)

//接收l(shuí)ist傳過(guò)來(lái)的參數(shù)
$topic_id = intval($_INPUT['topic_id']);
$state = $_INPUT['state'];

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

//數(shù)據(jù)庫(kù)借口
$trade_detail_obj = POCO::singleton ( 'pai_topic_class' );
$ret = $trade_detail_obj->get_task_detail($topic_id,$yue_login_id);

2、判斷是pc端還是客戶端（類似列表頁(yè)）

3、跳轉(zhuǎn)到detail-wap.php加載模板detail.tpl.htm同時(shí)也帶參數(shù)過(guò)去

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

//模板附帶以下三個(gè)參數(shù)到detail.tpl.htm中
$tpl->assign('ret', $ret);
$tpl->assign('topic_id', $topic_id);
$tpl->assign('state', $state);

4、頁(yè)面引用對(duì)象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">生意機(jī)會(huì)詳情/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">報(bào)名參加/span>
  /button>
  !-- ENDIF -->
  /div>
/div>

5、點(diǎn)擊報(bào)名參加按鈕進(jìn)行數(shù)據(jù)處理

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 : '發(fā)送中.....'
  });
},
success : function(data) 
{
  _self.$loading.loading("hide");
  //請(qǐng)求成功后顯示成功報(bào)名提示框，點(diǎn)擊報(bào)名提示框確定按鈕跳回列表頁(yè)面
if (data.result_data.result==1) 
{
var dialog = utility.dialog
({
  "title" : '' ,
  "content" : '提交成功，點(diǎn)擊確定返回',
  "buttons" : ["確定"]
});
 dialog.on('confirm',function(event,args)
   {
   window.location.href = document.referrer;
   });

  return;
   }





},  
error : function() 
{
  _self.$loading.loading("hide");
  $.tips({
content : '網(wǎng)絡(luò)異常',
stayTime : 3000,
type : 'warn'
  });
}

  });

});

以上這篇Ajax獲取數(shù)據(jù)然后顯示在頁(yè)面的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:
  • ajax接收后臺(tái)數(shù)據(jù)在html頁(yè)面顯示
  • jquery 通過(guò)ajax請(qǐng)求獲取后臺(tái)數(shù)據(jù)顯示在表格上的方法
  • ajax實(shí)現(xiàn)從后臺(tái)拿數(shù)據(jù)顯示在HTML前端的方法

標(biāo)簽：大理 廣元 衢州 蚌埠 萍鄉(xiāng) 衡水 棗莊 江蘇

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Ajax獲取數(shù)據(jù)然后顯示在頁(yè)面的實(shí)現(xiàn)方法》，本文關(guān)鍵詞  ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼

    • 電話咨詢

    • 400-1100-266