处理ajax数据;数据渲染(细节)
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
什么是 AJAX ?
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
// ajax模板 数据的处理
$.ajax({
method: 'POST', //POST GET
url: window.BASE_URL + 'api/v1/coupon/getcoupons', //地址
contentType: 'application/x-www-form-urlencoded',
async: true, //异步true 同步false
dataType: "json",
data: {
parameter: ,
},
success: function(data) {
console.log("成功");
var html = ''
//先判断 防止数据为空
if(data.data != null && data.data.promotionList != null && data.data.promotionList.length != ) {
// 处理数据
html = data
} else {
//数据不存在 要在页面显示数据为空 用户体验度很重要 1
html += '<div style="background: #fff;" class="nodata" style="display: none;">' +
'<p style="text-align: center; line-height: 40px; font-size: 12px;">没有相关的数据</p>' +
'</div>'
// 2
html += '<div style="background: #F4F4F4;" class="nodata" style="display: none;">' +
'<img style="width: 100%; display: block; height: auto; max-width: 100%;" src="https://s10.mogucdn.com/p2/161213/upload_74hhee883cbf190e3di6cljk23679_514x260.png"/>' +
'<p style="text-align: center; line-height: 40px; font-size: 12px;">没有相关的数据</p>' +
'</div>'
}
},
error: function(e) {
//接口错误,要提示出来,早发现,早修复
console.log("服务器错误");
}
});
处理ajax数据;数据渲染(细节)的更多相关文章
- ajax获取数据后怎么去渲染到页面?
$.ajax({ url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:fo ...
- 前端向服务器请求数据并渲染的方式(ajax/jQuery/axios/vue)
原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result
- echarts在miniUI和ajax下动态渲染数据
<script src="echarts.js"></script> <script src="jquery-3.3.1.min.js&qu ...
- 使用Python的Flask框架,结合Highchart,动态渲染图表(Ajax 请求数据接口)
参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...
- ajax载入数据是小细节
今天看了一个点子: 在 ajax 导入数据的 div中添加一些样式,比如:我们正紧急抢救 增加趣味性,有解决数据卡壳问题
- 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库
小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...
- select2 AJAX获取数据
页面效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...
- [NodeJs] 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库
小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...
- 渐进式web应用开发---ajax本地数据存储(四)
在前几篇文章中,我们使用service worker一步步优化了我们的页面,现在我们学习使用我们之前的indexedDB, 来缓存我们的ajax请求,第一次访问页面的时候,我们请求ajax,当我们继续 ...
- 渐进式web应用开发---使用indexedDB实现ajax本地数据存储(四)
在前几篇文章中,我们使用service worker一步步优化了我们的页面,现在我们学习使用我们之前的indexedDB, 来缓存我们的ajax请求,第一次访问页面的时候,我们请求ajax,当我们继续 ...
随机推荐
- 深度学习面试题18:网中网结构(Network in Network)
目录 举例 参考资料 网中网结构通过多个分支的运算(卷积或池化),将分支上的运算结果在深度上连接 举例 一个3*3*2的张量, 与3个1*1*2的卷积核分别same卷积,步长=1, 与2个2*2*2的 ...
- Column 'status' specified twice
字段写了两次, 检查下sql语句, 删除一个就好了.
- 解决 screen 连接不上,提示“There is no screen to be resumed matching 18352.” 的问题
当你挂起screen,下次想重新连上screen时,有时会出现screen session的状态为Attached但是却连不上的情况,比如我想重新进入session id 为18352的screen, ...
- 文献阅读 | Resetting histone modifications during human parental-to-zygotic transition
Resetting histone modifications during human parental-to-zygotic transition 人类亲本-合子转变中组蛋白修饰重编程 sci-h ...
- python 与开源Gis 书本知识点测试
# -*- coding: utf-8 -*- print(u"python与开源QGis课题研究组")#print("汉字") #++++++++++++++ ...
- java项目代码上线
java项目代码上线 1:java项目代码上线架构图 ip地址及主机名规划 10.0.0.11 deploy 10.0.0.12 tomcat-web01 10.0.0.13 git.oldboy ...
- [转]在CentOS安装CMake (CentOS7 64位适用)
一.环境描述 1.系统:CentOS 6.4 i386 (min) 2.登录用户:root 3.版本:CMake 2.8.10.2 4.虚拟机:Oracle VM VirtualBox 二.安装步骤 ...
- 从0开始学爬虫11之使用requests库下载图片
从0开始学爬虫11之使用requests库下载图片 # coding=utf-8 import requests def download_imgage(): ''' demo: 下载图片 ''' h ...
- OpenGL ES3使用MSAA(多重采样抗锯齿)的方法
昨晚花费了我2个多小时的时间终于把OpenGL ES3.0中的MSAA给搞定了.在OpenGL ES2.0中,Khronos官方没有引入标准的MSAA全屏抗锯齿的方法,而Apple则采用了自己的GL_ ...
- Access与SQL中的IsNull(),IS NULL的区别
Access也有IsNull函数,但意义和参数却和T-SQL中的不同. 在T-SQL(也就是SQL Server所支持的SQL语言)中,IsNull的作用是把空值替代成指定的值.然而在Access中, ...