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()写入的数据。