jQuery局部动态刷新
AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。
在做项目的过程当中要用到jQuery动态刷新获取数据,上网查了一番教程,讲此知识点的教程很多,但个人感觉比较乱,有的讲的很复杂。于是根据自己的项目所完成的功能,决定自己写一篇关于jQuery局部动态刷新获取数据的文章。
jQuery局部动态刷新的好处不言而喻,如果数据量非常大,采用网页一次获取数据的方式会对网页造成很大的压力,采用jQuery动态获取数据则可以避免这一点,它会实时获取你所请求的数据,下面直接附上代码:
<script>
var ajaxFresh = function(plate){ $.getJSON("http://localhost:3000/get?plate="+plate+"&ajax="+plate,null,function(data){
$("#myPlateLael").html(plate);
var tr = new String();
for(var i = 0;i < data.length;i++)
{ tr += "<tr><td>"+data[i].columns["DATA:TIME"].value+"</td><td>"+data[i].columns["DATA:DEVICE_IN"].value+
"</td><td>"+data[i].columns["DATA:POS"].value+"</td><td>"+data[i].columns["DATA:SPEED"].value+"/"+data[i].columns["DATA:LIMIT"].value
+"</td><td>"+data[i].columns["DATA:LENGTH"].value+"</td><td>"+data[i].columns["DATA:COLOR"].value+"</td></tr>";
}
$("#modal_content").html(tr); }); }
</script>
此代码放在html的<head>中,第2行的函数ajaxFresh响应以下按钮的请求:
<td><button type="button" onclick ="ajaxFresh('<%= key %>')" class="btn btn-info" data-toggle="modal" data-target="#demo"><%= key %></button>
第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的元素如下:
<div class="modal modal-wide fade" id="demo" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title text-success" id="myPlateLael">
</h4>
</div> <div class="modal-body">
<table class="table table-striped table-hover" width="100%">
<thead class="text-left">
<tr>
<td>Time</td>
<td>device_in</td>
<td>pos</td>
<td>speed</td>
<td>length</td>
<td>color</td>
</tr>
</thead>
<tbody id="modal_content" class="text-left">
</tbody>
</table> </div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
id=modal_content的元素即为表格的内容<tbody>。
综合以上情况即可实现点击按钮button时触发ajaxFresh函数,ajaxFresh通过getJSON请求数据,得到的数据以表格的形式写入<tbody>中,因为button中有一个模态框data_toggle="modal",data-target="#demo"即在点击的同时进入模态框,模态框的内容显示部分mmodal_boay的内容即是ajax的.html()写入的数据。
jQuery局部动态刷新的更多相关文章
- Jquery局部打印插件
局部打印插件 jquery.PrintArea.js js代码 (function ($) { var printAreaCount = 0; $.fn.printArea = fun ...
- jquery局部打印插件使用
基于jquery库的jquery.PrintArea.js插件源代码为: (function ($) { var printAreaCount = 0; $.fn.printArea = functi ...
- JQuery局部刷新与全页面刷新
局部刷新: 这个方法就多了去了,常见的有以下几种: $.get方法,$.post方法,$.getJson方法,$.ajax方法如下 前两种使用方法基本上一样 $.get(”Default.php”, ...
- jquery 局部刷新load 某个div或者某个表格
在使用 ajax 进行删除用户操作的时候,可以在 success 里写一个 window.location.reload(); 让页面刷新. 但是,我不想那样,我只想局部刷新 比如,我删除几个用户后, ...
- jQuery Mobile动态刷新页面样式
当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素.添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样 ...
- Jquery局部刷新小案列
/* 调用showTest()方法去后台拿到处理数据后返回到part.jsp页面,main.jsp再调用html()方法 和显示的结果集show()方法把part.jsp显示到当前的页面,实现局部页面 ...
- jQuery 局部div刷新和全局刷新方法
div的局部刷新 $(".dl").load(location.href+".dl"); 全页面的刷新方法 window.location.reload( ) ...
- [转]jQuery Mobile动态刷新页面样式
本文转自:http://blog.csdn.net/zht666/article/details/8560765 当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控 ...
- MVC采用Jquery实现局部刷新
该文纯粹属于个人学习,有不足之处请多多指教! 效果图: 单击Detail下面出现详细,效果如下: 为了使操作时两个不同的数据源相互干扰,使用局部视图刷新,代码如下: 首先介绍主页Index代码: @m ...
随机推荐
- 牛客网 Wannafly挑战赛9 A.找一找-数据处理
好几天没好好学习了(咸鱼晒干了) 把稍微没那么咸鱼的几天前的一场牛客网的比赛稍微看了一下,菜的要死,这一场大数的比较多,都死了. A.找一找 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C ...
- CCCC L2-024 部落【并查集】
https://www.patest.cn/contests/gplt/L2-024 首先在一行中输出这个社区的总人数.以及互不相交的部落的个数.随后对每一次查询,如果他们属于同一个部落,则在一行中输 ...
- 洛谷—— P3807 【模板】卢卡斯定理
https://www.luogu.org/problemnew/show/3807 题目背景 这是一道模板题. 题目描述 给定n,m,p(1\le n,m,p\le 10^51≤n,m,p≤105) ...
- DNA的分子结构
DNA是由两条链组成的, 这两条链按反相平行的方式盘旋成双螺旋结构 DNA分子中的脱氧核糖和磷酸交替连接, 排列在外侧, 构成基本骨架; 碱基排列在内侧. 两条链上的碱基通过氢键连接成碱基对, 并且其 ...
- 迅雷在P2P网络中的另类上传速度
如上图,我们一般在下载BT时,一般P2P是边下载边上传. 但是迅雷在自己的软件中可以设置上传速度,反而在展示时却把P2P协议的速度不在上传那么显示,而是使用协议速度来进行展示:并且这个速度无法设置. ...
- array_map常用技巧
array_map() 函数将用户自定义函数作用到数组中的每个值上,并返回用户自定义函数作用后的带有新值的数组. 简单来说 “array_map” 会对数组中的每一项进行处理,并返回处理后的数据. 定 ...
- cocos2d-x step by step(1) First Blood
下了cocos2d-x 源码,开搞! 首先,笔者本身 1) 5年没有摸过c++了 2) 没用过cocos2d-x 3) 有强烈的求知欲望(这条每个简历个人介绍不都这么写么, ...
- weblogic运维时经常遇到的问题和常用的配置
希望这篇能把weblogic运维时经常遇到的问题.常用的配置汇总到一起. 1.配置jvm参数: 一般在domain启动过程中会看到以下启动的日志信息,如下图所示: 图中红色方框部分为启动weblo ...
- vue-router 的URL路径中#的意义
传送门 https://router.vuejs.org/zh-c... Router 构造配置 routes 类型: Array<RouteConfig> RouteConfig 的类型 ...
- Effective JavaScript Item 54 将undefined视为"没有值"
将undefined视为"没有值" JavaScript中的undefined是一个特殊的值:当JavaScript没有提供详细的值时.它就会产生undefined. 比方: 未被 ...