使用JQUERY实时将JSON填充到表中
我正在寻找一个这样做的图书馆:
- 通过AJAX调用检索JSON
- 使用JSON填充表
- 使用JSON实时更新表(每隔x秒调用一次),只删除或隐藏已删除的行或插入新行。
/第一次回答后编辑
好吧我想我的第一个解释并不好。 通过jQuery检索JSON并构建一个表是好的,我可以这样做,但我的请求更多的是另一部分。 我正在寻找一个以特殊方式显示结果的库。 让我解释。
Json请求1发送:
1;番茄2;苹果3;沙拉4;胡萝卜
Json请求2发送:
1;番茄3;沙拉4;胡萝卜5;土豆
我希望第二行消除效果(fadeOut)并且下面的行向上移动。 对于第5行,我只想要一个淡入的新行。
那更清楚吗?
有没有图书馆存在这样做?
我在PHP中这样做,但我希望用JS编写所有这些。
用户只需查看表格,看到新行出现并删除旧行。
任何想法或我应该从头开始写它?
如果你想要一些友好且充满各种有用function的东西,你可以使用名为DataTables的jQuery插件。
它提供API,允许您根据请求从服务器提供新数据: http : //www.datatables.net/api
它也适用于简单的实现,可定制,允许更改其外观等。
希望这很有用。
你可以像这样得到json(在这里使用get
或post
,ill show post):
function do_json_live(){ $.post('url.php','somedata', function(returnJSON){ alert(returnJSON); //do something with the `returnJSON` setTimeout(do_json_live, 2000); //2000 ms = 2 seconds },'json'); }
这是一篇关于不同民意调查/彗星技术的精彩文章,您需要了解一下。 它简明扼要地描述了每一个,并指出了一些你可能没想到的陷阱: http : //query7.com/avoiding-long-polling 。 这里还有一个用于长轮询的jquery插件: http : //enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/
试试Jquery Grid Plugin 。 您可以从服务器检索JSON并在客户端构建网格。 看一下这个网站,有一些例子包括php。
首先我会读到这个 ,但代码实际上非常简单。
在你的前端,你有你的桌子
然后你将在JQuery中发布你的AJAXpost
$.ajax({ url: "yourphpfile", data: success: function(data){ $('#myTable').html(data); } });
你在php中的方法会接收你发布的data
,它会创建一个table
元素的HTML
字符串,然后你在前端设置你的table
的innerHTML
,内置到JQuery中的.html()
– 就这样你永远不必担心显示/隐藏,每次发布,你给出的table
本身,所以你只是显示,你可以处理服务器端的所有花哨的东西。
你可以使用很棒的jqGrid插件 。
要做autorefresh,你应该这样做:
setInterval(function(){ $("#grid1").trigger("reloadGrid"); }, 10000);
希望这可以帮助。 干杯。
如果确实需要实时更新,正如Neal所建议的那样,Comet或Stream-Hub将是一个值得检查的途径。
至于界面,我最近一直在使用JQuery模板,在协调添加/删除/更新记录时,我使用JQuery选择器来清除和更新,并使用模板添加新记录。 因为我在所有3个事件中使用JQuery,我可以轻松地集成他们的动作/视觉效果。
JQuery模板
JQuery选择器
JQuery效果
流的枢纽
我自己只需要轮询(每15秒)所以我正在使用Robert Fischer改进的JQuery PeriodicalUpdater
JQuery Periodical Updater