Jetzt zeige ich Ihnen eine Implementierungsmethode für Ajax, mit der Daten abgerufen und dann auf der Seite angezeigt werden. Lassen Sie mich es jetzt mit Ihnen teilen und es allen als Referenz geben.
Einführung in den Hauptfunktionsprozess
Schleife zum Abrufen von Listendaten
Klicken Sie auf die Listendaten, um die Detailseite aufzurufen
Klicken Sie auf „Registrieren“. Daraufhin wird ein Fenster mit der Meldung „Registrierung erfolgreich“ angezeigt
Klicken Sie auf die OK-Schaltfläche im Eingabeaufforderungsfeld, um zur Listenseite zurückzukehren
Code-Implementierungsprozess und Erklärung
1. Listenseite
1. Stellen Sie beim Zugriff auf die Linkliste.php fest, ob es sich um die PC-Seite oder den Client handelt.
$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';
}Nach dem Login kopieren
2 Wechseln Sie in der WAP-Version zur Seite list-wap.php und laden Sie die Seite list.tpl.htm
$pc_wap = 'wap/';
$tpl = $my_app_pai->getView(TASK_TEMPLATES_ROOT.$pc_wap.'trade/list.tpl.htm');
Nach dem Login kopieren
3. Die Seite List.tpl.htm rendert die Vorlage
HTML
<p class="page-view " data-role="page-container">
<p class="sales-list-page">
<p id="render-ele"></p>
</p>
</p>Nach dem Login kopieren
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 //渲染的模板
});
});Nach dem Login kopieren
list-item.tmpl-Vorlageninhalt (Loop-Listeninhalt)
<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>Nach dem Login kopieren
4. List.js führt die Datenverarbeitung durch, was nur einige der Methoden des Objekts ist Schreiben Sie die spezifische Methode selbst.
_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'
});
}
})Nach dem Login kopieren
5. get_trade_list.php empfängt die Anfrage von der Frontend-Seite, sammelt und verarbeitet dann die Daten und gibt sie schließlich an die Frontend-Seite zurück
// 接收参数
$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);Nach dem Login kopieren
Die Vorderseite -end page empfängt die von get_trade_list.php zurückgegebenen Daten, um den Inhalt der Datenbank zu beurteilen und auf der Startseite anzuzeigen. Vorlagenausgabe
$tpl->output();
Nach dem Login kopieren
Detailseite
1. Klicken Sie auf die Listenseite, um die Detailseite (detail.php) aufzurufen
Detail. Die PHP-Seite erhält die Daten aus der Liste
//接收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);Nach dem Login kopieren
2. Bestimmen Sie, ob es sich um die PC-Seite oder den Client handelt (ähnlich der Listenseite)
3. wap.php zum Laden der Vorlage detail.tpl .htm trägt auch Parameter
$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);
Nach dem Login kopieren
4. Felder im Seitenreferenzobjekt 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>Nach dem Login kopieren
5. Klicken Sie auf die Schaltfläche „Anmelden“ für die Datenverarbeitung
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'
});
}
});
});Nach dem Login kopieren
Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Ajax-Anfrage und Filter-Kooperationsfallanalyse
So lösen Sie das Problem von Arrays in AJAX-Anfragen
Eine Zusammenfassung von 5 Möglichkeiten zur Lösung von Cache-Problemen mit Ajax
Das obige ist der detaillierte Inhalt vonAjax-Methode, um Daten abzurufen und sie dann auf der Seite anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
