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">

                   &times;

             </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局部动态刷新的更多相关文章

  1. Jquery局部打印插件

    局部打印插件 jquery.PrintArea.js js代码 (function ($) {     var printAreaCount = 0;     $.fn.printArea = fun ...

  2. jquery局部打印插件使用

    基于jquery库的jquery.PrintArea.js插件源代码为: (function ($) { var printAreaCount = 0; $.fn.printArea = functi ...

  3. JQuery局部刷新与全页面刷新

    局部刷新: 这个方法就多了去了,常见的有以下几种: $.get方法,$.post方法,$.getJson方法,$.ajax方法如下 前两种使用方法基本上一样 $.get(”Default.php”, ...

  4. jquery 局部刷新load 某个div或者某个表格

    在使用 ajax 进行删除用户操作的时候,可以在 success 里写一个 window.location.reload(); 让页面刷新. 但是,我不想那样,我只想局部刷新 比如,我删除几个用户后, ...

  5. jQuery Mobile动态刷新页面样式

    当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素.添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样 ...

  6. Jquery局部刷新小案列

    /* 调用showTest()方法去后台拿到处理数据后返回到part.jsp页面,main.jsp再调用html()方法 和显示的结果集show()方法把part.jsp显示到当前的页面,实现局部页面 ...

  7. jQuery 局部div刷新和全局刷新方法

    div的局部刷新 $(".dl").load(location.href+".dl");  全页面的刷新方法 window.location.reload( ) ...

  8. [转]jQuery Mobile动态刷新页面样式

    本文转自:http://blog.csdn.net/zht666/article/details/8560765 当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控 ...

  9. MVC采用Jquery实现局部刷新

    该文纯粹属于个人学习,有不足之处请多多指教! 效果图: 单击Detail下面出现详细,效果如下: 为了使操作时两个不同的数据源相互干扰,使用局部视图刷新,代码如下: 首先介绍主页Index代码: @m ...

随机推荐

  1. hdu 4506(数学,循环节+快速幂)

    小明系列故事——师兄帮帮忙 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...

  2. 使用iframe实现提交表单不刷新页面

    正常情况下,当你向服务器发送数据的时候,你的浏览器将会打开action页面,并且不会重回到当前页面.但是有的时候,我们因为各种各样的要求,而不希望浏览器在提交数据的时候去刷新当前的页面或者转向到新的页 ...

  3. AC日记——[USACO11DEC]牧草种植Grass Planting 洛谷 P3038

    题目描述 Farmer John has N barren pastures (2 <= N <= 100,000) connected by N-1 bidirectional road ...

  4. 字蛛（font-spider）-单独压缩字体（解决页面少有的特殊字体的字体包引用）

    特别想独立的把这个问题写成一篇内容,分享给大家. 反正我是这个字体压缩使用的受益者,不是打广告. 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字 ...

  5. Cryptography I 学习笔记 --- 流密码

    1. 对于一次性密码本(one time pad),没有唯密文攻击(cypher text only attack),也就是说如果攻击者只能拿到密文,他什么也做不了 2. 完美密码:密钥长度大于密文长 ...

  6. 将压缩包文件（rar/zip）伪装成图片（jpg/gif/png/ico）

    1.在Windows上使用copy命令,缺点是只能是jpg文件,gif不支持,命令如下: copy in1.jpg+in2.rar out.jpg 2.网上说使用UEdit方式可以制作gif,但是测试 ...

  7. 邁向IT專家成功之路的三十則鐵律 鐵律十八：IT人求職之道-文化

    IT人所從事的工作是一個求新求變速度最快的行業,因此您所待的企業IT部門或資訊公司,其組織文化將關係到您在這間公司服務期間,是否能夠快速成長的決定因素.遇到不良的組織文化建議您三個就可以走人了,千萬別 ...

  8. 为什么硬盘明明还有空间，linux却说硬盘空间不足？inode；mkdir: 无法创建目录"shen1": 设备上没有空间

    现象:df -h显示硬盘还有14G空间,但是touch file/mkdir directory都失败,提示硬盘没有空间 原因:df -ia查看下inode的使用情况,发现已经爆了,(下图显示使用88 ...

  9. Android 设定横屏，禁止屏幕旋转，Activity重置 [更新视频播放器相关]

    1. 设定屏幕方向 当指定了屏幕的方向后(非SCREEN_ORIENTATION_UNSPECIFIED),屏幕就不会自己主动的旋转了 有2中方式控制屏幕方向: 1.1 改动AndroidManife ...

  10. Git以及github的使用方法（六），管理修改

    现在,假定你已经完全掌握了暂存区的概念.下面,我们要讨论的就是,为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 你会问,什么是修改?比如你新增了一行,这就是一个修改 ...