這篇文章主要介紹Ajax如何實現(xiàn)獲取數(shù)據(jù)后顯示在頁面,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
目前成都創(chuàng)新互聯(lián)公司已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、河北網(wǎng)站維護等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
主要功能流程介紹
循環(huán)獲取列表數(shù)據(jù)
點擊列表數(shù)據(jù)進入詳情頁
點擊報名參加彈出報名成功提示框
點擊提示框中的確定按鈕,跳回列表頁
代碼實現(xiàn)流程和解說
一、列表頁
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版就跳轉(zhuǎn)到 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
JS
$(function() // 渲染模塊 { //請求php的url var TRADE_AJAX_URL = window.$__ajax_domain + 'get_trade_list.php'; //獲取已經(jīng)封裝在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"),//渲染數(shù)據(jù)到id為render-ele中 url : TRADE_AJAX_URL,//請求數(shù)據(jù)連接 template : template //渲染的模板 }); });
list-item.tmpl模板內(nèi)容(循環(huán)的列表內(nèi)容)
{{#each list}} {{#if is_enroll}} {{else}} {{/if}}{{/each}}{{title}}
所屬品類:{{type}}
{{ enroll_text }}
4、list.js進行數(shù)據(jù)處理,僅是對象的部分方法,具體的方法請自行寫。
_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"); //是否有分頁 self.has_next_page = data.result_data.has_next_page; // 無數(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接收到前端頁面發(fā)過來的請求,然后進行數(shù)據(jù)收集處理最終返回數(shù)據(jù)給前臺頁面
// 接收參數(shù) $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}"; //請求數(shù)據(jù)庫的借口 $sales_list_obj = POCO::singleton ( 'pai_topic_class' ); $ret = $sales_list_obj-> get_task_list(false, '', 'id DESC', $limit); // 輸出前進行過濾最后一個數(shù)據(jù),用于真實輸出 $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、前端頁面接收到get_trade_list.php返回的數(shù)據(jù),從而進行判斷將數(shù)據(jù)庫的內(nèi)容顯示在前臺頁面中。模板輸出
$tpl->output();
詳情頁
1、點擊列表頁進入詳情頁(detail.php)
detail.php頁面 接收 列表傳過來的數(shù)據(jù)
//接收list傳過來的參數(shù) $topic_id = intval($_INPUT['topic_id']); $state = $_INPUT['state']; if (empty($topic_id)) { header("location: ".'./list.php'); } //數(shù)據(jù)庫借口 $trade_detail_obj = POCO::singleton ( 'pai_topic_class' ); $ret = $trade_detail_obj->get_task_detail($topic_id,$yue_login_id);
2、判斷是pc端還是客戶端(類似列表頁)
3、跳轉(zhuǎn)到detail-wap.php加載模板detail.tpl.htm同時也帶參數(shù)過去
$pc_wap = 'wap/'; $tpl = $my_app_pai->getView(TASK_TEMPLATES_ROOT.$pc_wap.'trade/detail.tpl.htm'); //模板附帶以下三個參數(shù)到detail.tpl.htm中 $tpl->assign('ret', $ret); $tpl->assign('topic_id', $topic_id); $tpl->assign('state', $state);
4、頁面引用對象ret中的字段
{ret.title}
{ret.enroll_text}
生意機會詳情
{ret.content}
5、點擊報名參加按鈕進行數(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"); //請求成功后顯示成功報名提示框,點擊報名提示框確定按鈕跳回列表頁面 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 : '網(wǎng)絡(luò)異常', stayTime : 3000, type : 'warn' }); } }); });
以上是“Ajax如何實現(xiàn)獲取數(shù)據(jù)后顯示在頁面”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!