使用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(在这里使用getpost ,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字符串,然后你在前端设置你的tableinnerHTML ,内置到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