AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

  1. // ajax模板 数据的处理
  2. $.ajax({
  3. method: 'POST', //POST GET
  4. url: window.BASE_URL + 'api/v1/coupon/getcoupons', //地址
  5. contentType: 'application/x-www-form-urlencoded',
  6. async: true, //异步true 同步false
  7. dataType: "json",
  8. data: {
  9. parameter: ,
  10. },
  11. success: function(data) {
  12. console.log("成功");
  13. var html = ''
  14. //先判断 防止数据为空
  15. if(data.data != null && data.data.promotionList != null && data.data.promotionList.length != ) {
  16. // 处理数据
  17. html = data
  18. } else {
  19. //数据不存在 要在页面显示数据为空 用户体验度很重要 1
  20. html += '<div style="background: #fff;" class="nodata" style="display: none;">' +
  21. '<p style="text-align: center; line-height: 40px; font-size: 12px;">没有相关的数据</p>' +
  22. '</div>'
  23. // 2
  24. html += '<div style="background: #F4F4F4;" class="nodata" style="display: none;">' +
  25. '<img style="width: 100%; display: block; height: auto; max-width: 100%;" src="https://s10.mogucdn.com/p2/161213/upload_74hhee883cbf190e3di6cljk23679_514x260.png"/>' +
  26. '<p style="text-align: center; line-height: 40px; font-size: 12px;">没有相关的数据</p>' +
  27. '</div>'
  28. }
  29. },
  30. error: function(e) {
  31. //接口错误,要提示出来,早发现,早修复
  32. console.log("服务器错误");
  33. }
  34. });

处理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. Python中单引号和双引号的作用

    一.单引号和双引号 在Python中我们都知道单引号和双引号都可以用来表示一个字符串,比如 str1 = 'python' str2 = "python" str1和str2是没有 ...

  2. Tensorflow 2 Cifar10离线数据集手动下载、离线安装、本地加载、快速读取

    Tensorflow 2 Cifar10离线数据集手动下载.离线安装.本地加载.快速读取 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com   查 ...

  3. Hive小文件处理

    小文件是如何产生的: 动态分区插入数据的时候,会产生大量的小文件,从而导致map数量的暴增 数据源本身就包含有大量的小文件 reduce个数越多,生成的小文件也越多 小文件的危害: 从HIVE角度来看 ...

  4. mysql的备份与还原,安装(window)

    之前一直使用的navicat的自动的备份功能.但是在使用navicat的还原功能时,贼慢. 今天要做的是window服务器上将mysql单个数据库备份.然后还原到我的mac笔记本上. 本来以为很快的, ...

  5. openresty开发系列3--nginx的平滑升级

    openresty开发系列3--nginx的平滑升级 nginx服务器从低版本升级为高版本,如果强行停止服务,会影响正在运行的进程. 平滑升级不会停掉正在运行中的进程,这些进程会继续处理请求.但不会接 ...

  6. Linux expect的安装与使用

    Expect是在Tcl的基础上创建的,可以用来做一些Linux下无法做到交互的命令操作,可用于远程管理服务器. 一.安装Tcl: 1.下载源码包: wget http://nchc.dl.source ...

  7. 报错:ModuleNotFoundError: No module named '_ctypes'

    报错背景: CentOS 7 Python3.7 安装 setuptools 插件的时候报错. 报错现象: [root@master setuptools-]# python3. setup.py b ...

  8. Spring Cloud Ribbon 客户端负载均衡 4.3

      在分布式架构中,服务器端负载均衡通常是由Nginx实现分发请求的,而客户端的同一个实例部署在多个应用上时,也需要实现负载均衡.那么Spring Cloud中是否提供了这种负载均衡的功能呢?答案是肯 ...

  9. LeetCode_299. Bulls and Cows

    299. Bulls and Cows Easy You are playing the following Bulls and Cows game with your friend: You wri ...

  10. 安卓微信overflow-x overflow-y引发的bug

    今天xgo文章图片页上线用微信扫页面发现一个bug,页面可以双击放大缩小. 找了半天原因,发现是图片描述设置了overflow-y引发的bug. 建议在微信场景里满屏显示不能滚动的页面里慎用overf ...