Ajax gets the data and then displays it in the implementation method of the page _ajax related

Introduction of main function flow

Looping through list data

Click on the list data to enter the details page

Click to sign up to participate in pop-up registration success prompt box

Click on the OK button in the prompt box to jump back to the list page

Code implementation process and commentary

One, List page

1, access to link list.php when the judge is the PC or client

$user _agent_arr = Mall_get_user_agent_arr ();
if (mall_ua_is_pc = = 1)
{
  //****************** PC version ******************
  include_once './list-pc.php ';

}
Else
{

  //****************** wap version ******************
  include_once './list-wap.php ';

2, if it is a WAP version to jump to the list-wap.php page, load list.tpl.htm page

$pc _wap = ' wap/';
$TPL = $my _app_pai->getview (task_templates_root. $pc _wap. ' trade/list.tpl.htm ');

3, list.tpl.htm page for rendering template

Html

<div class= "Page-view" data-role= "Page-container" >

    <div class= "Sales-list-page" >
      <div id= " Render-ele "></div>
    </div>

  </div>

Js

$ (function ()
  //Render module
  {
    //request PHP URL
    var trade_ajax_url = window.$__ajax_domain + ' get_trade_list.php ' ;
    Gets an object that has been encapsulated inside the list.js list_item_class
    var list_item_class = require ('. /.. /.. /.. /modules/list/list.js ');
    Gets the template block
    var template = __inline ('./list-item.tmpl ');

    var list_obj = new List_item_class ({
      ele: $ ("#render-ele"),/render data to ID Render-ele
      Request data Connection
      Template:template//Render template
    });

  

List-item.tmpl template Content (List contents of loops)

<div 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}}
    <div class= "Item Ui-border-b" >
      <div class= "Img-item" >
        <i class= "img" style= "Background-image:url ({{img}}});" >

        </i>
      </div>
      <div class= "Text-item" >
        <div class= "Txt-con-1" >
          
 
 

4, list.js data processing, is only part of the method of the object, the specific method please write.

 _self.ajax_obj = Utility.ajax_request ({url:self.send_url, Data:self.ajax_params, Beforesend:function ()

  {self._sending = true; _self. $loading = $.loading ({content: ' Load ... '});
}, Success:function (data) {self._sending = false;//Get data var list_data = data.result_data.list; console.log;

Process events before rendering self. $el. Trigger (' List_render:before ', [self. $list _container,data]);

_self. $loading. Loading ("Hide");

Whether there is paging self.has_next_page = data.result_data.has_next_page;

  No data processing 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 ');}
Put the data into the template var html_str = self.template ({list:list_data});
Insert Render list self. $list _container.append (HTML_STR);

Processing events after rendering 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: ' network exception ', staytime:3000, type: ' warn '}); }
})

5, Get_trade_list.php received the front-end page sent over the request, and then data collection processing eventually returned data to the front page

Receive parameter
$page = intval ($_input[' page '));



if (empty ($page))
{
  $page = 1;
}

Pagination used 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}";



The pretext for requesting a database
$sales _list_obj = Poco::singleton (' Pai_topic_class ');
$ret = $sales _list_obj-> get_task_list (False, ', ' ID DESC ', $limit);





Filter the last data before the output for the true output
$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;

Output Data
mall_mobile_output ($output _arr,false);

6, the front-end page receives the get_trade_list.php returns the data, thus carries on the judgment the content of the database displays in the foreground page. Template output

$tpl->output ();

Details page

1, click on the list page to enter the details page (detail.php)

Detail.php the data that the page receives from the list.

Receive the list pass the parameter
$topic _id = intval ($_input[' topic_id '));
$state = $_input[' state '];

if (Empty ($topic _id)) 
{
  header ("Location:".) /list.php ');
}

Database excuse
$trade _detail_obj = Poco::singleton (' Pai_topic_class ');
$ret = $trade _detail_obj->get_task_detail ($topic _id, $yue _login_id);

2, the judge is the PC side or client (similar list page)

3, jump to detail-wap.php load template detail.tpl.htm also with parameters in the past

$pc _wap = ' wap/';
$TPL = $my _app_pai->getview (task_templates_root. $pc _wap. ' trade/detail.tpl.htm ');

The template comes with the following three parameters to the detail.tpl.htm
$tpl->assign (' ret ', $ret);
$tpl->assign (' topic_id ', $topic _id);
$tpl->assign (' state ', $state);

4, fields in the page reference object RET

<div class= "Sales-detail-page" > <div class= "item-wrap" > <div class= "item-1 item" > <div class= "im
G-item "> <i class=" img ">  </i> </div> <div class=" Txt-item "> 
 

5, click the registration to participate in the button for data processing

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: ' Send ... '
  });
Success:function (data) 
{
  _self. $loading. Loading ("Hide");
  After the successful request to display the successful Registration prompt box, click the Registration prompt box to determine the button to jump back to the list page
if (data.result_data.result==1) 
{
var dialog = Utility.dialog
({
  "title": ",
  " content ": ' Submit successfully, click OK Return ',
  " buttons ": [" OK "]
});
 Dialog.on (' Confirm ', function (Event,args)
   {
   window.location.href = document.referrer;
   });

  return;
   }





,  
error:function () 
{
  _self. $loading. Loading ("Hide");
  $.tips ({
content: ' Network exception ',
staytime:3000,
type: ' Warn '
  })

;}});

The above Ajax access to data and then display the implementation of the page is small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.