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

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

}

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

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

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

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

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();

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

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

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

  });

});

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!