Ajax如何实现获取数据后显示在页面-创新互联

这篇文章主要介绍Ajax如何实现获取数据后显示在页面，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联服务项目包括白银网站建设、白银网站制作、白银网页制作以及白银网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，白银网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到白银省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

主要功能流程介绍

循环获取列表数据

Ajax如何实现获取数据后显示在页面

点击列表数据进入详情页

Ajax如何实现获取数据后显示在页面

点击报名参加弹出报名成功提示框

Ajax如何实现获取数据后显示在页面

点击提示框中的确定按钮，跳回列表页

代码实现流程和解说

一、列表页

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

$(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 //渲染的模板 }); });

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

// 接收参数 $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);

//接收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);

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

大橙子网站建设，新征程启航

Ajax如何实现获取数据后显示在页面-创新互联

其他资讯