处理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,当我们继续 ...
随机推荐
- Python中单引号和双引号的作用
一.单引号和双引号 在Python中我们都知道单引号和双引号都可以用来表示一个字符串,比如 str1 = 'python' str2 = "python" str1和str2是没有 ...
- Tensorflow 2 Cifar10离线数据集手动下载、离线安装、本地加载、快速读取
Tensorflow 2 Cifar10离线数据集手动下载.离线安装.本地加载.快速读取 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 查 ...
- Hive小文件处理
小文件是如何产生的: 动态分区插入数据的时候,会产生大量的小文件,从而导致map数量的暴增 数据源本身就包含有大量的小文件 reduce个数越多,生成的小文件也越多 小文件的危害: 从HIVE角度来看 ...
- mysql的备份与还原,安装(window)
之前一直使用的navicat的自动的备份功能.但是在使用navicat的还原功能时,贼慢. 今天要做的是window服务器上将mysql单个数据库备份.然后还原到我的mac笔记本上. 本来以为很快的, ...
- openresty开发系列3--nginx的平滑升级
openresty开发系列3--nginx的平滑升级 nginx服务器从低版本升级为高版本,如果强行停止服务,会影响正在运行的进程. 平滑升级不会停掉正在运行中的进程,这些进程会继续处理请求.但不会接 ...
- Linux expect的安装与使用
Expect是在Tcl的基础上创建的,可以用来做一些Linux下无法做到交互的命令操作,可用于远程管理服务器. 一.安装Tcl: 1.下载源码包: wget http://nchc.dl.source ...
- 报错:ModuleNotFoundError: No module named '_ctypes'
报错背景: CentOS 7 Python3.7 安装 setuptools 插件的时候报错. 报错现象: [root@master setuptools-]# python3. setup.py b ...
- Spring Cloud Ribbon 客户端负载均衡 4.3
在分布式架构中,服务器端负载均衡通常是由Nginx实现分发请求的,而客户端的同一个实例部署在多个应用上时,也需要实现负载均衡.那么Spring Cloud中是否提供了这种负载均衡的功能呢?答案是肯 ...
- LeetCode_299. Bulls and Cows
299. Bulls and Cows Easy You are playing the following Bulls and Cows game with your friend: You wri ...
- 安卓微信overflow-x overflow-y引发的bug
今天xgo文章图片页上线用微信扫页面发现一个bug,页面可以双击放大缩小. 找了半天原因,发现是图片描述设置了overflow-y引发的bug. 建议在微信场景里满屏显示不能滚动的页面里慎用overf ...