Блог

У меня есть следующий HTML-код для отображения содержимого, извлеченного из ajax-скрипта (ajax.php):

HTML

 lt;ul class="list-unstyled" id="var_adjectives"gt;lt;ligt;lt;a href='#'gt;Loading...lt;/agt;lt;/ligt;lt;/ulgt; lt;button id="37" onclick='update_adjectives();'gt;Refreshlt;/buttongt;  lt;hr /gt;  lt;ul class="list-unstyled" id="var_brands"gt;lt;ligt;lt;a href='#'gt;Loading...lt;/agt;lt;/ligt;lt;/ulgt; lt;button id="37" onclick='update_brands();'gt;Refreshlt;/buttongt;  lt;hr /gt;  lt;ul class="list-unstyled" id="var_clothes"gt;lt;ligt;lt;a href='#'gt;Loading...lt;/agt;lt;/ligt;lt;/ulgt; lt;button id="37" onclick='update_clothes();'gt;Refreshlt;/buttongt;  lt;hr /gt;  

При первой загрузке страницы следующий JS используется для заполнения элементов списка соответствующим lt;ulgt; тегом (каждый раз передавая два параметра).:

Загрузка страницы Javascript

 $(document).ready(function(){  $.post('ajax.php',{u:37,n:1} ,function(data){ var this_record = data.output; $('#var_adjectives').html(this_record);},'json');  $.post('ajax.php',{u:37,n:33},function(data){ var this_record = data.output; $('#var_brands').html(this_record);},'json');  $.post('ajax.php',{u:37,n:67},function(data){ var this_record = data.output; $('#var_clothes').html(this_record);},'json'); });  

refresh Кнопку можно использовать для обновления содержимого в соответствующем lt;ulgt; теге, вызывая следующую соответствующую функцию JS из onclick события на каждой из 3 кнопок:

Функции обновления Javascript

 function update_adjectives() {  $.post('ajax.php'  , {u:37,n:1}  , function(data){ var this_record = data.output; $('#var_adjectives').html(this_record); }  , 'json') };  function update_brands() {   $.post('ajax.php'  , {u:37,n:33}  , function(data){ var this_record = data.output; $('#var_brands').html(this_record); }  , 'json') };  function update_clothes() {  $.post('ajax.php'  , {u:37,n:67}  , function(data){ var this_record = data.output; $('#var_clothes').html(this_record); }  , 'json') };  

Как вы можете видеть, в базовом дизайне JS много совпадений.

У меня есть эти вопросы:

1. Я застрял, пытаясь понять, как я могу получить одну строку в блоке JS, используемом для заполнения содержимого при первой загрузке страницы.
2. Я бы хотел, чтобы для обновления контента использовалась только 1 функция — потому что в приведенном выше примере у меня 3 блока, но на моей реальной странице у меня около 30 блоков.

Хотя JS создается PHP-кодом при загрузке страницы (вместо того, чтобы я писал его вручную), все равно было бы неплохо иметь гораздо более чистый код, который позволяет избежать, например, 30 функций обновления и 30 строк кода для заполнения каждого из разных lt;ulgt; идентификаторов при первой загрузке страницы.

В каждом случае я вижу, что мне нужно будет передать соответствующий идентификатор, lt;ulgt; но я завязан в узлах, решая, смогу ли я достичь того, что пытаюсь сделать.

Вероятно, в использовании onclick события тоже есть много ошибок!

Любой совет был бы очень признателен, спасибо.

Наиболее вероятным блокировщиком является ваш дизайн конечной точки API. В соответствии с тем, что вы опубликовали, вы должны получать доступ к одной категории за раз, и это должно быть сделано путем отправки {u:N,n:N} комбинированного объекта в качестве тела запроса на публикацию.

Это значительно упростило бы ситуацию, если бы ваша конечная точка приняла другой объект. Что-то подобное {category:'name'} позволило бы обеспечить большую гибкость.

Вы можете использовать {category: 'all'} для начального просмотра всех категорий и использовать {category: 'clothes'} для отдельных категорий для обновления/обновления.

Расширяя это до нажатия кнопок обновления. Вы можете использовать один обработчик событий и пузырьки событий для обработки каждого нажатия кнопки.

Сначала вы должны добавить обработчик событий lt;ulgt; в элемент, содержащий все элементы.

Учитывая этот макет:

 lt;div id='container'gt;  lt;ulgt;lt;ligt;lt;spangt;loading...lt;/spangt;lt;/ligt;lt;/ulgt;  lt;button data-category="adjectives"gt;Refreshlt;/buttongt;  lt;ulgt;lt;ligt;lt;spangt;loading...lt;/spangt;lt;/ligt;lt;/ulgt;  lt;button data-category="brands"gt;Refreshlt;/buttongt;  lt;ulgt;lt;ligt;lt;spangt;loading...lt;/spangt;lt;/ligt;lt;/ulgt;  lt;button data-category="clothes"gt;Refreshlt;/buttongt; lt;/divgt;  

Вы можете реагировать на все нажатия кнопок следующим образом:

 document.getElementById('container').addEventListener('click', update);  

Обработчик update() событий может определить, какая кнопка была нажата, проверив data- атрибут на кнопке. Затем сделайте запрос AJAX и поместите данные в правильный lt;ulgt; , найдя ближайший или prev() родственный lt;ulgt; элемент.

 function update() {  const category = this.dataset.category;  $.post('ajax.php', {category: category}  , function(data) {  $('button').data(category).prev('ul').html(data.output);  }, 'json') };