ホームページ > ウェブフロントエンド > jsチュートリアル > データを取得してページに表示する Ajax メソッド

データを取得してページに表示する Ajax メソッド

亚连
リリース: 2018-05-23 15:12:26
オリジナル
7273 人が閲覧しました

今回はAjaxでデータを取得してページに表示する実装方法をお届けします。今からそれを皆さんと共有し、皆さんの参考にしてください。

メイン関数の処理の紹介

リストデータを取得するループ

リストデータをクリックして詳細ページに入ります

クリックしてサインアップし、登録成功のプロンプトを表示しますボックスが表示されます

プロンプトボックスをクリックします OKボタンをクリックしてリストページに戻ります

コードの実装プロセスと説明

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

}
ログイン後にコピー
2.wap版の場合はlist-wap.phpページにジャンプし、list.tpl.htmページを読み込みます

$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 + &#39;get_trade_list.php&#39;;
    //获取已经封装在list.js里面的一个对象list_item_class
    var list_item_class = require(&#39;../../../../modules/list/list.js&#39;);
    //获取模板块
    var template = __inline(&#39;./list-item.tmpl&#39;);

    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:&#39;加载中...&#39;
});

  },
  success : function(data)
  {
self._sending = false;
//获取数据
var list_data = data.result_data.list;
console.log(data);
//渲染前处理事件
self.$el.trigger(&#39;list_render:before&#39;,[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(&#39;fn-hide&#39;);

  return;
}
else
{
  self.$load_more.removeClass(&#39;fn-hide&#39;);
}

//把数据放入模板
var html_str = self.template
({
  list : list_data
});
//插入渲染列表
self.$list_container.append(html_str);
//渲染后处理事件
self.$el.trigger(&#39;list_render:after&#39;,[self.$list_container,data,$(html_str)]);

self.setup_event();
  },
  error : function()
  {
self._sending = false;
_self.$loading.loading("hide");
$.tips
  ({
content:&#39;网络异常&#39;,
stayTime:3000,
type:&#39;warn&#39;
  });
  }
})
ログイン後にコピー

5. get_trade_list.php はフロントエンドページからリクエストを受け取り、データを収集して処理し、最後にデータをフロントエンドページに返します

// 接收参数
$page = intval($_INPUT[&#39;page&#39;]);



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 ( &#39;pai_topic_class&#39; );
$ret = $sales_list_obj-> get_task_list(false, &#39;&#39;, &#39;id DESC&#39;, $limit);





// 输出前进行过滤最后一个数据,用于真实输出
$rel_page_count = 4;



$has_next_page = (count($ret)>$rel_page_count);

if($has_next_page)
{
  array_pop($ret);
}

$output_arr[&#39;page&#39;] = $page;

$output_arr[&#39;has_next_page&#39;] = $has_next_page;

$output_arr[&#39;list&#39;] = $ret;

// 输出数据
mall_mobile_output($output_arr,false);
ログイン後にコピー

6. フロントエンドページは、によって返されたデータを受け取ります。 get_trade_list.php、データベースを判断するための内容がフロントページに表示されます。テンプレート出力

$tpl->output();
ログイン後にコピー

詳細ページ

1. リストページをクリックして詳細ページ(detail.php)に入りますdetail.phpページはリスト

//接收list传过来的参数
$topic_id = intval($_INPUT[&#39;topic_id&#39;]);
$state = $_INPUT[&#39;state&#39;];

if (empty($topic_id)) 
{
  header("location: ".&#39;./list.php&#39;);
}

//数据库借口
$trade_detail_obj = POCO::singleton ( &#39;pai_topic_class&#39; );
$ret = $trade_detail_obj->get_task_detail($topic_id,$yue_login_id);
ログイン後にコピー

からデータを受け取ります。 PC 側またはクライアント側 (リスト ページと同様)

3.detail-wap.php にジャンプしてテンプレートdetail.tpl.htm をロードし、パラメータも取得します

$pc_wap = &#39;wap/&#39;;
$tpl = $my_app_pai->getView(TASK_TEMPLATES_ROOT.$pc_wap.&#39;trade/detail.tpl.htm&#39;);

//模板附带以下三个参数到detail.tpl.htm中
$tpl->assign(&#39;ret&#39;, $ret);
$tpl->assign(&#39;topic_id&#39;, $topic_id);
$tpl->assign(&#39;state&#39;, $state);
ログイン後にコピー

4.オブジェクト 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(&#39;click&#39;, function() {
  var data = 
  {
topic_id : {ret.id}
  }
  utility.ajax_request({
url : window.$__ajax_domain+&#39;add_task_enroll_trade.php&#39;,
data : data,
type : &#39;POST&#39;,
cache : false,
beforeSend : function() 
{
  _self.$loading = $.loading({
content : &#39;发送中.....&#39;
  });
},
success : function(data) 
{
  _self.$loading.loading("hide");
  //请求成功后显示成功报名提示框,点击报名提示框确定按钮跳回列表页面
if (data.result_data.result==1) 
{
var dialog = utility.dialog
({
  "title" : &#39;&#39; ,
  "content" : &#39;提交成功,点击确定返回&#39;,
  "buttons" : ["确定"]
});
 dialog.on(&#39;confirm&#39;,function(event,args)
   {
   window.location.href = document.referrer;
   });

  return;
   }





},  
error : function() 
{
  _self.$loading.loading("hide");
  $.tips({
content : &#39;网络异常&#39;,
stayTime : 3000,
type : &#39;warn&#39;
  });
}

  });

});
ログイン後にコピー

以上が、皆様の参考になれば幸いです。

関連記事:

Ajaxリクエストとフィルター連携事例分析

AJAXリクエストの配列問題の解決方法

Ajaxキャッシュを解決する5つの方法まとめ

以上がデータを取得してページに表示する Ajax メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート