This time I will bring you Ajax to obtain data and display it on the front-end page. What are the precautions after Ajax obtains data and display it on the front-end page. The following is a practical case, let's take a look.
Introduction to the main function process
Loop to obtain list data
Click on the list data to enter the details page
Click to register and a successful registration prompt box will pop up
Click on the prompt box Click the OK button to jump back to the list page
Code implementation process and explanation
##1. List page
1. When accessing the link list.php, determine whether it is the PC side or the client side$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');
<p class="page-view " data-role="page-container"> <p class="sales-list-page"> <p id="render-ele"></p> </p> </p>
$(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 //渲染的模板 }); });
<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>
_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' }); } })
// 接收参数 $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);
$tpl->output();
Details page
1. Click the list page to enter the details page (detail.php)detail. The php page receives the data from the list//接收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 realizes the three-level linkage list of provinces and municipalities
Ajax transmits Json and xml data Detailed explanation of the steps (with code)
The above is the detailed content of Ajax retrieves data and displays it on the front-end page. For more information, please follow other related articles on the PHP Chinese website!