博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery局部动态刷新
阅读量:5287 次
发布时间:2019-06-14

本文共 1571 字,大约阅读时间需要 5 分钟。

AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。

在做项目的过程当中要用到jQuery动态刷新获取数据,上网查了一番教程,讲此知识点的教程很多,但个人感觉比较乱,有的讲的很复杂。于是根据自己的项目所完成的功能,决定自己写一篇关于jQuery局部动态刷新获取数据的文章。

jQuery局部动态刷新的好处不言而喻,如果数据量非常大,采用网页一次获取数据的方式会对网页造成很大的压力,采用jQuery动态获取数据则可以避免这一点,它会实时获取你所请求的数据,下面直接附上代码:

1 

此代码放在html的<head>中,第2行的函数ajaxFresh响应以下按钮的请求:

第4行$.getJSON就是jQuery的应用,getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。后端的返回数据格式就应该是json格式的,用,res.json()返回数据。

getJSON语法为:

$(selector).getJSON(url,data,success(data,status,xhr))

url:必需。规定将请求发送到哪个 URL。

data:可选。规定发送到服务器的数据。为json格式,为空时直接写null。

success(data,status,xhr):可选。规定当请求成功时运行的函数。

  • data - 包含从服务器返回的数据
  • status - 包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror")
  • xhr - 包含 XMLHttpRequest 对象

第6行的tr是为14行的画表格准备数据,第14行就是向id为modal_content的元素写入数据,id为modal_content的元素如下:

1 

id=modal_content的元素即为表格的内容<tbody>。

综合以上情况即可实现点击按钮button时触发ajaxFresh函数,ajaxFresh通过getJSON请求数据,得到的数据以表格的形式写入<tbody>中,因为button中有一个模态框data_toggle="modal",data-target="#demo"即在点击的同时进入模态框,模态框的内容显示部分mmodal_boay的内容即是ajax的.html()写入的数据。

 

   

转载于:https://www.cnblogs.com/cocos2014/p/4269885.html

你可能感兴趣的文章
mongodb命令----批量更改文档字段名
查看>>
国外常见互联网盈利创新模式
查看>>
android:scaleType属性
查看>>
shell脚本
查看>>
Upload Image to .NET Core 2.1 API
查看>>
Linux中防火墙centos
查看>>
[JS]递归对象或数组
查看>>
linux sed命令
查看>>
程序存储问题
查看>>
优雅地书写回调——Promise
查看>>
PHP的配置
查看>>
Struts框架----进度1
查看>>
Round B APAC Test 2017
查看>>
MySQL 字符编码问题详细解释
查看>>
css & input type & search icon
查看>>
语音识别中的MFCC的提取原理和MATLAB实现
查看>>
c# 文件笔记
查看>>
心得25--JDK新特性9-泛型1-加深介绍
查看>>
HDU-1255 覆盖的面积 (扫描线)
查看>>
Java 中 静态方法与非静态方法的区别
查看>>