Заполнение JSON в таблицу в режиме реального времени с помощью JQUERY

ProgramBox

Заполнение JSON в таблицу в режиме реального времени с помощью JQUERY

Post author:admin
Запись опубликована:1 мая, 2023
Post category:Вопросы по программированию

#php #jquery #json #real-time

#php #jquery #json #в режиме реального времени

Вопрос:

Я ищу библиотеку, которая делает это :

Извлечение JSON с помощью вызова AJAX
Заполнить таблицу с помощью JSON
Обновляйте таблицу в режиме реального времени с помощью JSON (вызывайте каждые x секунд) и удаляйте или скрывайте только те строки, которые были удалены, или вставляйте новые строки.

/Редактирование после первого ответа

Хорошо, я думаю, мое первое объяснение не было хорошим. Извлечение с помощью jQuery JSON и построение таблицы — это хорошо, я мог бы это сделать, но мой запрос касался другой части. Я ищу библиотеку для отображения результата особым образом. Позвольте мне объяснить.

Отправить запрос Json 1:
1; Помидор 2; Яблоко 3; Салат 4; Карот

Отправить Json-запрос 2:
1; Помидор 3; Салат 4; Морковь 5; Картофель

Я бы хотел, чтобы вторая строка исчезла с эффектом (fadeOut), а строки ниже переместились вверх. Для строки 5 я просто хочу, чтобы новая строка отображалась с постепенным изменением.

Это более понятно?

Существует ли какая-либо библиотека, выполняющая это?

Я делаю это на PHP, но я надеюсь написать все это на JS.

Пользователь может просто просмотреть таблицу и увидеть, как появляются новые строки, а старые удаляются.

Есть идеи или я должен написать это с нуля?

1. С помощью какого веб-фреймворка вы разрабатываете? — И написать это с нуля невероятно просто, я могу предоставить код, если вы дадите мне знать, с помощью какого фреймворка вам это нужно.

2. Чтобы выполнить вызов AJAX, jQuery необходимо где-то опубликовать. Вы пишете на PHP, ASP.NET что?

3. действительно жаль, php … не могу поверить, что я не упомянул id (редактирование)

Ответ №1:

Вы можете получить json следующим образом (используйте get или 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');
}

1. проблема не в том, чтобы извлечь json, а в том, чтобы обновить таблицу удобным способом

2. @Nicolas, все зависит от того, что вы считаете «дружественным» и каков ваш json. я оставил это открытым для вас, но помог вам начать со стороны ajax

3. У меня есть живая страница, которую я использовал для поддержки с помощью этого метода, но совсем недавно я переключился на comet

4. Хорошо, я думаю, мое первое объяснение не было хорошим. Извлечение с помощью jquery json и построение таблицы — это хорошо, я мог бы это сделать, но мой запрос касался другой части. Я ищу библиотеку для отображения результата особым образом.

5. Хорошо, я думаю, мое первое объяснение не было хорошим. Извлечение с помощью jquery json и построение таблицы — это хорошо, я мог бы это сделать, но мой запрос касался другой части. Я ищу библиотеку для отображения результата особым образом. Позвольте мне объяснить. Запрос Json 1 отправить: 1; Помидор 2; Яблоко 3; Салат 4; Морковь Запрос Json 2 отправить: 1; Помидор 3; Салат 4; Морковь 5; Картофель Я бы хотел, чтобы вторая строка исчезла с эффектом (fadeOut), а строки ниже переместились вверх. Для строки 5 я просто хочу, чтобы новая строка отображалась с постепенным изменением. Это более понятно? Существует ли какая-либо библиотека, выполняющая это? Еще раз спасибо

Ответ №2:

Если вы хотите что-то дружественное и полное различных полезных функций, вы можете использовать плагин jQuery под названием DataTables.

Он предоставляет API, позволяющий предоставлять новые данные с сервера по запросу: http://www.datatables.net/api

Это также работает для простых реализаций, довольно настраиваемо, позволяет изменять его внешний вид и т.д.

Надеюсь, это полезно.

1. Хорошо, я думаю, мое первое объяснение не было хорошим. Извлечение с помощью jquery json и построение таблицы — это хорошо, я мог бы это сделать, но мой запрос касался другой части. Я ищу библиотеку для отображения результата особым образом. Позвольте мне объяснить. Запрос Json 1 отправить: 1; Помидор 2; Яблоко 3; Салат 4; Морковь Запрос Json 2 отправить: 1; Помидор 3; Салат 4; Морковь 5; Картофель Я бы хотел, чтобы вторая строка исчезла с эффектом (fadeOut), а строки ниже переместились вверх. Для строки 5 я просто хочу, чтобы новая строка отображалась с постепенным изменением. <br> Это более понятно? Существует ли какая-либо библиотека, выполняющая это? Еще раз спасибо

Ответ №3:

Вот действительно хорошая статья о различных методах опроса / comet, с которыми вы захотите ознакомиться. Он кратко описывает каждый из них и указывает на некоторые подводные камни, о которых вы, возможно, не подумали.: http://query7.com/avoiding-long-polling. Также здесь есть плагин jquery для длительного опроса: http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling

Ответ №4:

Попробуйте плагин Jquery Grid. Вы можете получить JSON с сервера и построить сетку на стороне клиента. Взгляните на веб-сайт, там есть несколько примеров, включая php.

Ответ №5:

Сначала я бы прочитал это, но код на самом деле очень простой.

На вашем интерфейсе у вас будет ваша таблица

 <table id="myTable"></table>

Затем вы создадите свой AJAX-пост в jQuery

 $.ajax({
  url: "yourphpfile",
  data: <data you want your php file to read>
  success: function(data){
    $('#myTable').html(data);
  }
});

Ваш метод в php принял бы ваш размещенный data , он создал бы HTML строку table элемента, а затем вы бы установили свои table ‘s innerHTML во внешнем интерфейсе с помощью .html() встроенного jQuery — таким образом, вам никогда не придется беспокоиться о показе / скрытии при каждой публикации вашего данного table элемента, так что вы просто отображаете именно это, вы можете обрабатывать все причудливые вещи на стороне сервера.

Ответ №6:

Вы могли бы использовать потрясающий плагин jqGrid.

Чтобы выполнить автоматическое обновление, вы должны сделать это:

 setInterval(function(){
  $("#grid1").trigger("reloadGrid");
}, 10000);

Надеюсь, это поможет. Приветствия.

Ответ №7:

Если действительно требуется обновление в режиме реального времени, как предложил Нил, Comet или Stream-Hub были бы одним из способов, которым стоит воспользоваться.

Что касается интерфейса, я недавно использовал шаблоны jQuery, и при согласовании добавленных / удаленных / обновленных записей я использую селекторы jQuery для очистки и обновления и использую шаблоны для добавления новых записей. И поскольку я использую jQuery во всех трех событиях, я мог бы легко интегрировать их эффекты движения / визуальные эффекты.

Мне самому нужен был только опрос (каждые 15 секунд), поэтому я использую улучшенный jQuery PeriodicalUpdater Роберта Фишера

jQuery Periodical Updater