Ajax-Methode, um Daten abzurufen und auf der Seite anzuzeigen

Dieser Artikel stellt Ihnen hauptsächlich eine Implementierungsmethode vor, mit der Ajax Daten abruft und sie dann auf der Seite anzeigt. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Einführung in die wichtigsten Funktionsprozesse

Schleife zum Abrufen von Listendaten

Klicken Sie zur Eingabe auf die Listendaten die Detailseite

Klicken Sie, um sich zu registrieren. Daraufhin wird ein Fenster mit der Meldung „Registrierung erfolgreich“ angezeigt.

Klicken Sie auf die Schaltfläche „OK“. das Eingabeaufforderungsfeld, um zur Listenseite zurückzukehren

Code-Implementierungsprozess und Erklärung

1. Listenseite

1. Stellen Sie beim Zugriff auf die Linkliste fest, ob dies der Fall ist ist die PC-Seite oder der Client

$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. Wenn es sich um die WAP-Version handelt, springen Sie 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');

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>

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-Vorlageninhalt (zyklischer 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>

4. list .js führt die Datenverarbeitung durch. Dies sind nur einige der Methoden des Objekts. Bitte schreiben Sie die spezifischen Methoden 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'
  });
  }
})

5. get_trade_list.php empfängt die Anfrage von der Frontend-Seite, sammelt und verarbeitet dann die Daten und gibt die Daten 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);

6. Die Front-End-Seite empfängt get_trade_list Die von .php zurückgegebenen Daten werden verwendet, um den Inhalt der Datenbank auf der Startseite zu beurteilen und anzuzeigen. Vorlagenausgabe

$tpl->output();

Detailseite

1. Klicken Sie auf die Listenseite, um die Detailseite (detail.php) aufzurufen.

detail.php-Seite empfängt die Von Daten übergebene 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);

2. Bestimmen Sie, ob es sich um einen PC oder einen Client handelt (ähnlich der Listenseite)

3. Springen Sie zu detail-wap.php, um die Vorlage zu laden detail.tpl.htm Bringen Sie gleichzeitig die 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);

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>

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'
  });
}

  });

});

Verwandte Empfehlungen:

Drei jQuery-Methoden zur Verwendung von JSONP zum domänenübergreifenden Abrufen von Daten

Einführung in die Methode zum Abrufen von Daten aus der Datenbank in PHP

PHP-Beispielcode zum Abrufen von Daten aus der Datenbank

Das obige ist der detaillierte Inhalt vonAjax-Methode, um Daten abzurufen und auf der Seite anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!