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数据;数据渲染(细节)的更多相关文章

  1. ajax获取数据后怎么去渲染到页面?

    $.ajax({ url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:fo ...

  2. 前端向服务器请求数据并渲染的方式(ajax/jQuery/axios/vue)

    原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result

  3. echarts在miniUI和ajax下动态渲染数据

    <script src="echarts.js"></script> <script src="jquery-3.3.1.min.js&qu ...

  4. 使用Python的Flask框架,结合Highchart,动态渲染图表(Ajax 请求数据接口)

    参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...

  5. ajax载入数据是小细节

    今天看了一个点子: 在 ajax 导入数据的 div中添加一些样式,比如:我们正紧急抢救 增加趣味性,有解决数据卡壳问题

  6. 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

  7. select2 AJAX获取数据

    页面效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  8. [NodeJs] 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

  9. 渐进式web应用开发---ajax本地数据存储(四)

    在前几篇文章中,我们使用service worker一步步优化了我们的页面,现在我们学习使用我们之前的indexedDB, 来缓存我们的ajax请求,第一次访问页面的时候,我们请求ajax,当我们继续 ...

  10. 渐进式web应用开发---使用indexedDB实现ajax本地数据存储(四)

    在前几篇文章中,我们使用service worker一步步优化了我们的页面,现在我们学习使用我们之前的indexedDB, 来缓存我们的ajax请求,第一次访问页面的时候,我们请求ajax,当我们继续 ...

随机推荐

  1. windows 共享文件夹,和共享打印机

    达成的情形,目标主机上登陆用户设置密码,其他pc上需要目标主机的用户和密码才能访问其共享文件夹 步骤:1.目标主机,设置文件夹共享    在文件夹上右键-属性,点击共享选项卡,然后点击共享按钮,继续点 ...

  2. 树莓派 pip 手动安装 和使用阿里云源

    在 /etc/pip.conf 添加如下内容,启用源 [global] extra-index-url=https://www.piwheels.org/simple 下载后 pip install ...

  3. Hibernate Persistence Contexts

    Hibernate ORM 5.2.18.Final User Guidehttps://docs.jboss.org/hibernate/orm/5.2/userguide/html_single/ ...

  4. [原][osg][OSGEARTH]OE的关闭打开自动计算裁剪面被OE的海洋ocean影响

    在osgEarthUtil 下 Ocean.cpp 的  traverse函数中: // we don't want the ocean participating in the N/F calcul ...

  5. linux生成新的列(awk)

    awk的功能特别强大,其中一个功能就是生成新的列,不论这列是在第一列,最后一列,还是中间,随你任性插入. 举例来说,有下列文件test1.txt test1.txt a b c 1 2 3 现在我想在 ...

  6. 复习sql server 2000 MSDE2000 ,安装,打补丁,开1433端口。

    前言: 由于工作需要,一个仍在使用的古董软件需要安装配置. 原有系统是在主机部署,单机安装sql2000,其他机器(分机)也单机部署软件,部署sql2000,通过dtsrun /f sync.dts( ...

  7. 【linux基础-err】 tar命令-stdin: not in gzip format

    problem gzip: stdin: not in gzip format tar: Error is not recoverable: exiting now 解决方法 最后发现下载的压缩文件有 ...

  8. 【Leetcode_easy】1029. Two City Scheduling

    problem 1029. Two City Scheduling 参考 1. Leetcode_easy_1029. Two City Scheduling; 完

  9. node及npm安装与配置

    一,安装环境查看 软件版本选择 node 10.16.3 二,软件安装 软件下载,下载地址 https://nodejs.org/dist/ 解压安装 cp node-v10.16.3-linux-x ...

  10. Nginx虚拟目录(alias)和根目录(root)

    功能要求: 假设nginx配置的域名是www.kazihuo.com,现有静态资源/home/www/oye目录需要通过nginx访问. 功能实现: 前提要求: 1.在nginx.conf中到处第二行 ...