通过ajax获取的数据怎怎么在html上,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
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模板内容(循环的列表内容)
{{#each list}}
{{#if is_enroll}}
{{else}}
{{/if}}
{{title}}
所属品类:{{type}}
{{ enroll_text }}
{{/each}}
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:'加载中...'
});
},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',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接收到前端页面发过来的请求,然后进行数据收集处理最终返回数据给前台页面
// 接收参数
$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);
6、前端页面接收到get_trade_list.PHP返回的数据,从而进行判断将数据库的内容显示在前台页面中。模板输出
$tpl->output();
详情页
1、点击列表页进入详情页(detail.PHP)
detail.PHP页面 接收 列表传过来的数据
//接收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、判断是pc端还是客户端(类似列表页)
3、跳转到detail-wap.PHP加载模板detail.tpl.htm同时也带参数过去
$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、页面引用对象ret中的字段
{ret.title}
{ret.enroll_text}
生意机会详情
{ret.content}
已参加
报名参加
5、点击报名参加按钮进行数据处理
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'
});
}
});
});
以上这篇Ajax获取数据然后显示在页面的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程小技巧。
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!
通过ajax获取的数据怎怎么在html上,Ajax获取数据然后显示在页面的实现方法相关推荐
- layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上,鼠标悬浮,显示所有文字内容(修改源码)...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了 问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
- 学习笔记(01):大数据视频_Hadoop视频教程(上)-大数据课程
立即学习:https://edu.csdn.net/course/play/19912/254968?utm_source=blogtoedu 1
- Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
- ajax option请求后无post请求_ThingJS:一种浏览器、服务器和技术的新组合方法——Ajax...
Web应用是一种极大方便用户的操作界面,数据维护技术Ajax也从中脱颖而出,ThingJS采用了Ajax的数据维护能够形成轻量化的开发流程. 为什么Ajax 通过XHR 实现Ajax 通信的一个主要限 ...
- 【数据架构系列-04】趁着国家数据局来了,一起聊聊政府数据开放,未来道阻且长
这几天朋友圈.订阅号.新闻推送频繁出来的消息是国家要成立数据局,"3月7日下午,根据国务院关于提请审议国务院机构改革方案的议案,组建国家数据局,一个全新的机构即将诞生".可见国家是 ...
- hdfs 数据迁移_基于JindoFS+OSS构建高效数据湖
作者:孙大鹏,花名诚历,阿里巴巴计算平台事业部 EMR 技术专家,Apache Sentry PMC,Apache Commons Committer,目前从事开源大数据存储和优化方面的工作. 为什么 ...
- hdfs 数据迁移_基于 JindoFS+OSS 构建高效数据湖
为什么要构建数据湖 大数据时代早期,Apache HDFS 是构建具有海量存储能力数据仓库的首选方案.随着云计算.大数据.AI 等技术的发展,所有云厂商都在不断完善自家的对象存储,来更好地适配 Apa ...
- 电脑上删除的数据怎么恢复?简单几个步骤,助你轻松找回!
很多人在工作中,往往一不小心就把电脑上的数据删除了,隔天又想恢复.然后想尽办法恢复数据却不尽人意.那怎么恢复电脑上已删除的数据呢?简单几个步骤,助你轻松找回! 万兴恢复专家是万兴科技旗下的一款软件,也 ...
- 基于ONENET云平台数据的MQTT协议的使用及模拟数据和搭建。
登录与添加: 首先,我们打开ONENET云平台 然后选择登录 登录以后我们选择多协议接入中的MQTT 接着我们点击"添加产品"按钮 输入产品名称丶行业丶类别丶简介 技术参数中联网方 ...
最新文章
- 深入浅出卷积神经网络及实现!
- 利用Hadoop Streaming处理二进制格式文件
- JUnit和hamcrest的jar包关系
- TCP send 阻塞与非阻塞
- hive函数大全:11大类、109个函数
- 基础省选+NOI-第4部分 动态规划
- 在HTML中使用WCF RESTful上传文件
- mysql异机备份_RMAN异机恢复备份集权限问题
- k8s访问控制--理解RBAC和OPA
- libsvm3.21 matlab,Matlab 2015b安装libsvm 3.21
- python编程(import头文件)
- 【webi 专题】能否通过传参数动态生成二维图表?
- mysql时间设计模式_java 23种设计模式及具体例子 收藏有时间慢慢看
- 软件项目组织与管理期末考试复习要点整理翻译
- 计算机vb小游戏,用vb6.0做一个小游戏
- 第1章-确定superboot210如何为smart210的nand flash进行的分区划分
- 2020年中国微特电机行业现状、竞争格局及未来发展趋势分析,我国产量达全球70%,技术与发达国家仍有差距「图」
- c语言餐桌游戏,教会你这十款酒桌游戏,让你在朋友圈稳站“C”位!
- struts2拦截器,拦截指定方法
- matlab在电力系统中的应用 当当,MATLAB在电力系统分析中的应用