Как можно объединить ajax?

191

11 августа 2018, 17:10

Есть код:

$(document).ready(function(){
  load_data();
  load_data2();
  function load_data(query)
  {
    $.ajax({
      url:"add.php",
      method:"POST",
      data:{query:query},
      success:function(data)
      {
        $('#result').html(data);
      }
    });
  }
  function load_data2(query2)
  {
    $.ajax({
      url:"add2.php",
      method:"POST",
      data:{query2:query2},
      success:function(data)
      {
        $('#result').html(data);
      }
    });
  }
  $('#search').keyup(function(){
    var search = $(this).val();
    if(search != '')
    {
      load_data(search);
    }
    else
    {
      load_data();
    }
  });
  $('#search2').keyup(function(){
    var search2 = $(this).val();
    if(search2 != '')
    {
      load_data2(search2);
    }
    else
    {
      load_data2();
    }
  });     
});

Таких проверок у меня около 15 штук. Как можно объединить это все, точнее, упростить?

Answer 1

<input class="search" data-column="col1" />
<input class="search" data-column="col2" />
$('.search').keyup(function(){
  load_data($(this).val(), $(this).data("column"));
});
function load_data(searchTerm, columnName)
{
  $.ajax({
    url:"add.php",
    method:"POST",
    data: { 
      query: searchTerm,
      column: columnName
    },
    success:function(data)
    {
      $('#result').html(data);
    }
  });
}

Answer 2

Предыдущий ответ от Igor частично раскрывает решение
Вобщем примерно так:

<!-- HTML -->
<table>
  <thead>
    <tr>
      <!-- Поисковые поля располагать в шапке таблицы, использовать placeholder -->
      <th>ID</th>
      <th><input type="text" class="js-search" data-column="fam" placeholder="Фамилия"></th>
      <th><input type="text" class="js-search" data-column="im" placeholder="Имя"></th>
      <th><input type="text" class="js-search" data-column="age" placeholder="Возраст"></th>
      <th><!-- Остальные поля по шаблону выше --></th>
    </tr>
  </thead>
  <tbody id="result"></tbody>
</table>

В клиентском обработчике используй замыкание для хранения состояния поиска. В идеале нужно использовать debounce функцию, чтобы ajax запросы не летели при каждом нажатии кнопки

// инициализация поиска при готовности разметки
$(document).ready(initSearch)
function initSearch(){
  var fields = {}
  var $searchFields = $('.js-search')
  var $result = $('#result')
  // В обработчике используем функцию задержки обработки события 
  $('.js-search').on('keypress', debounce(function(e){
    var $th = $(this)
    // поле, по которому ищем
    fields[$th.data('column')] = $th.val()
    // но на сервер отправляем все заполненные поля
    $.ajax({
      method: 'POST',
      url: '/search.php',
      data: fields
    }).done(function(res){
      // в результат вставляем отрендеренный html таблицы
      $result.html(renderTableResult(res))
    }).fail(function(err){
      console.log(err)
    })
  },200))
  /** 
   * функция формирует разметку результатов поиска
   * использует не конкатенацию строк, а join массива
   * @param <array> items - найденные элементы
   * @return string 
   */
  function renderTableResult(items){
    // в colspan ставишь количество столбцов
    if(!items.length) return '<tr><td colspan="3">Не найдено</td></tr>'
    var html = []
    for(var i=0; i < items.length; i++){
      html.push('<tr>')
      // порядковый номер
      html.push('<td>'+(i+1)+'</td>')
      // соответсвующие поля
      html.push('<td>'+ items[i].fam +'</td>')
      html.push('<td>'+ items[i].im +'</td>')
      html.push('<td>'+ items[i].age +'</td>')
      html.push('</tr>')
    }
    return html.join('')
  }
}
/** 
 * можно и плагин подключить
 * ВНИМАНИЕ! синтаксис ES2015
 * инфо http://jquery.page2page.ru/index.php5/Throttle-debounce
 * данная функция взята с https://learn.javascript.ru/task/debounce
 */
function debounce(f, ms) {
  let timer = null;
  return function (...args) {
    const onComplete = () => {
      f.apply(this, args);
      timer = null;
    }
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(onComplete, ms);
  };
}

Первоначальные нефильтрованные данные с пагинацией сам решай, как вставлять - непосредственно в разметку при загрузке страницы или же отдельный ajax запрос при инициализации

На сервер тебе будет прилетать объект со всеми заполненными полями. Остается только написать серверный обработчик с логикой фильтрации