vetty

jQuery局部动态刷新

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

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

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

 1 <script>
 2 var ajaxFresh = function(plate){
 3 
 4     $.getJSON("http://localhost:3000/get?plate="+plate+"&ajax="+plate,null,function(data){
 5         $("#myPlateLael").html(plate);
 6             var tr = new String();
 7                 for(var i = 0;i < data.length;i++)
 8                 {
 9 
10                     tr += "<tr><td>"+data[i].columns["DATA:TIME"].value+"</td><td>"+data[i].columns["DATA:DEVICE_IN"].value+
11                     "</td><td>"+data[i].columns["DATA:POS"].value+"</td><td>"+data[i].columns["DATA:SPEED"].value+"/"+data[i].columns["DATA:LIMIT"].value
12                     +"</td><td>"+data[i].columns["DATA:LENGTH"].value+"</td><td>"+data[i].columns["DATA:COLOR"].value+"</td></tr>";
13                 }
14              $("#modal_content").html(tr);
15              
16              });
17 
18 }
19 </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的元素如下：

 1 <div class="modal modal-wide fade" id="demo" tabindex="-1" role="dialog" 
 2     aria-labelledby="myModalLabel" aria-hidden="true">
 3    <div class="modal-dialog">
 4       <div class="modal-content">
 5          <div class="modal-header">
 6             <button type="button" class="close" 
 7                data-dismiss="modal" aria-hidden="true">
 8                   &times;
 9             </button>
10          <h4 class="modal-title text-success" id="myPlateLael">
11          </h4>           
12          </div>
13          
14          <div class="modal-body">
15              <table class="table table-striped table-hover" width="100%">
16                <thead class="text-left">
17                  <tr>
18                    <td>Time</td>
19                    <td>device_in</td>
20                    <td>pos</td>
21                    <td>speed</td>
22                    <td>length</td>
23                    <td>color</td>
24                  </tr>
25                </thead>
26                <tbody id="modal_content" class="text-left">
27                </tbody>
28               </table>
29 
30          </div>
31       </div><!-- /.modal-content -->
32 </div><!-- /.modal -->
33 </div>

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

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

 

   

posted on 2015-02-03 14:22  cocos2014  阅读(2819)  评论(0)  编辑  收藏  举报

导航