이번에는 Ajax가 데이터를 얻어서 프론트엔드 페이지에 표시하기 위한 주의 사항이 무엇인지 실제 사례와 함께 살펴보겠습니다.
주요 기능 프로세스 소개
목록 데이터를 얻기 위한 루프
목록 데이터를 클릭하여 세부정보 페이지로 들어가세요
가입하려면 클릭하세요. 등록 성공 메시지가 표시됩니다. 상자가 나타납니다
프롬프트 상자를 클릭하면 목록 페이지로 돌아가려면 확인 버튼을 클릭하세요
코드 구현 과정 및 설명
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);2. PC 측 또는 클라이언트 측(목록 페이지와 유사)
3.detail-wap.php로 이동하여 Detail.tpl.htm 템플릿을 로드하고 매개변수도 가져옵니다.
$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);4. object 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. 가입 버튼을 클릭하세요. 데이터 처리 수행
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'
});
}
});
});이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요. !
추천 자료:
Ajax+mysq는 지방자치단체의 3단계 연결 목록을 구현합니다.Json 및 xml 데이터의 Ajax 전송 단계에 대한 자세한 설명(코드 포함)
위 내용은 Ajax는 데이터를 검색하여 프런트엔드 페이지에 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
