How to Use Ajax to obtain data and display it on the page.

How to Use Ajax to obtain data and display it on the page.

Main function process Introduction

Obtain list data cyclically

Click list data to go to the details page.

Click sign up to bring up the registration success prompt box

Click OK in the prompt box to go back to the list page.

Code implementation process and Explanation

I. List page

1. when accessing the list. php link, determine whether the connection is 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 wap edition 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');

32.16list.tpl.htm page 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 () // rendering module {// request php url var TRADE_AJAX_URL = window. $ __ajax_domain + 'get _ trade_list.php '; // obtain the information that has been encapsulated in the list. in js, an object list_item_class var list_item_class = require ('.. /.. /.. /.. /modules/list. js '); // obtain the template block var template = _ inline ('. /list-item.tmpl '); var list_obj = new list_item_class ({ele: $ ("# render-ele"), // render the data to the url: TRADE_AJAX_URL in id render-ele, // request data connection template: template // rendered template });});

List-item.tmpl template content (Cyclic list content)

<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 is used for data processing. It is only part of the object method. Please write the specific method on your own.
_ Self. ajax_obj = utility. ajax_request ({url: self. send_url, data: self. ajax_params, beforeSend: function () {self. _ sending = true; _ self. $ loading = $. loading ({content: 'loading... '}) ;}, success: function (data) {self. _ sending = false; // obtain the data var list_data = data. result_data.list; console. log (data); // renders the pre-processing event self. $ el. trigger ('list _ render: before', [self. $ list_container, data]); _ self. $ loading. loading ("hide "); // Whether there are pages 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 in the template var html_str = self. template ({list: list_data}); // Insert the rendering list self. $ list_container.append (html_str); // post-rendering event 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 receives the request sent from the front-end page, collects the data, and finally returns the data to the front-end page.
// Receiving parameter $ page = intval ($ _ INPUT ['page']); if (empty ($ page) {$ page = 1 ;} // page_count $ page_count = 5 for pagination; if ($ page> 1) {$ limit_start = ($ page-1) * ($ page_count-1 );} else {$ limit_start = ($ page-1) * $ page_count;} $ limit = "{$ limit_start}, {$ page_count }"; // database Request excuse $ 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 real 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 data returned by get_trade_list.php and determines whether the database content is displayed on the front-end page. Template output
$tpl->output();
Details page
1. Click the list page to go to the details page (detail. php)

The detail. php page receives data from the list.
// Receives the parameter $ topic_id = intval ($ _ INPUT ['topic _ id']) from the list; $ 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. determine whether it is a pc or a client (similar to the list page)

3 bytes to the detail-wap.php?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 $ tpl-> assign ('ret ', $ ret) in detail.tpl.htm; $ tpl-> assign ('topic _ id ', $ topic_id); $ tpl-> assign ('state', $ state );
4. Fields in the ret object referenced on the page
<Div class = "sales-detail-page"> <div class = "item-wrap"> <div class = "item-1 item"> <div class = "img- item "> <I class =" img ">  </I> </div> <div class =" txt-item "> 

5. Click "sign up" to process data.
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: 'sending ..... '}) ;}, success: function (data) {_ self. $ loading. loading ("hide"); // The success register prompt box is displayed after the request is successful. Click the confirm button in the register prompt box to jump back to the list page if (data. result_data.result = 1) {var dialog = utility. dialog ({"title": ''," content ": 'submitted successfully, click confirm to 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 method for getting data and displaying the data on the page is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's house.