今回はAjaxがデータを取得してフロントエンドページに表示する際の注意点を紹介します。実際の事例と合わせて見ていきましょう。
メイン関数の処理の紹介
リストデータを取得するループ
リストデータをクリックして詳細ページに入ります
クリックしてサインアップし、登録成功のプロンプトを表示しますボックスが表示されます
プロンプトボックスをクリックします OKボタンをクリックしてリストページに戻ります
コードの実装プロセスと説明
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';
}
$pc_wap = 'wap/'; $tpl = $my_app_pai->getView(TASK_TEMPLATES_ROOT.$pc_wap.'trade/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
$(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 テンプレートコンテンツ (ループリストコンテンツ)
<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 はデータ処理を実行します。オブジェクトのメソッドは自分で記述してください。
_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',[self.$list_container,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);
$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);
<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>
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' }); } }); });
Ajax+mysqで都道府県・市区町村の3段階連携リストを実現
JsonとXMLデータのAjax送信手順を詳しく解説(コード付き)
以上がAjax はデータを取得し、フロントエンド ページに表示します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。