как передать несколько параметров, используя ту же функцию в AJAX

Question

Fiddle Link

Вот моя функция мне нужно передать несколько параметров динамически с помощью той же функции. Возможно ли отправить несколько параметров в ajax?

function search_filter(getsearch){ 

    var headercolumn = getsearch.id; 
    var columnvalue = getsearch.value; 

     $.ajax({ 
     url: 'some_ajax.php', 
     type: 'POST', 
     dataType: 'html', 
     data: { 
      'headercolumn': headercolumn, 
      'columnvalue': columnvalue 
     }, 
     success: function(data, textStatus, xhr) { 
      console.log('success'); 
     } 
    }); 
} 

В настоящее время параметры отправляют что-то вроде этого, я имею в виду один за другим.

data: { 
    'headercolumn': server, 
    'columnvalue': givenvlue 
}, 

Ожидаемый результат

Мне нужно передать несколько параметров при вызове же функции "search_filter"

data: { 
    'headercolumn': server,media_server,eact_server 
    'columnvalue': servervalue,media_servevalue,eact_servervalue 
}, 

Надеюсь, вы понимаете, мои потребности. :)

Answer 1

Просто используйте array:

data: { 
    'headercolumn': [server,media_server,eact_server] 
    'columnvalue': [servervalue,media_servevalue,eact_servervalue] 
} 

Answer 2

Я думаю, что массив соответствует вашим потребностям

data: { 
     'headercolumn': [server, media_server, eact_server], 
     'columnvalue': [servervalue, media_servevalue, eact_servervalue] 
    } 

Answer 3

Похоже, вы выкладываете все ваши input элемента id и value когда-либо один из значение вводимого значения изменяется.

Я бы порекомендовал вас удалить onkeypress обработчики событий в HTML-элементах, но скорее добавьте четный прослушиватель с помощью JQuery. Сохранение кода в отдельности помогает в улучшенном обслуживании. Сказав это, вы можете использовать приведенный ниже код.

$(function() { // wait for document ready event 
 
    $('input').on('keyup', function() { // bind keyup event to all inputs 
 
     var headerArray = []; //have empty arrays 
 
     var columnArray = []; 
 

 
     $('input').each(function() { //fill array values by looping all input elements 
 
     headerArray.push($(this).attr('id')); //fill id's for header 
 
     columnArray.push($(this).val());  //fill values for columns 
 
     }); 
 

 
     //demo purpose 
 
     console.log(headerArray); 
 
     console.log(columnArray); 
 
     //demo ends 
 
    
 
     $.ajax({ 
 
     url: 'some_ajax.php', 
 
     type: 'POST', 
 
     dataType: 'html', 
 
     data: { 
 
      'headercolumn': headerArray, 
 
      'columnvalue': columnArray 
 
     }, 
 
     success: function(data, textStatus, xhr) { 
 
      console.log('success'); 
 
     } 
 
     }); 
 

 
    }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <input type="text" name="server" class="search_server" style="width: 94%" id="search_server"> 
 
</p> 
 

 
<p> 
 
    <input type="text" name="media_server" class="media_server" style="width: 94%" id="media_server"> 
 
</p> 
 

 
<p> 
 
    <input type="text" name="eact_server" class="eact_server" style="width: 94%" id="eact_server"> 
 
</p>

Answer 4

Fiddle Я думаю, что ваш пытаются сделать что-то вроде

$(function() { 
    $('input').on('change', function() { 
     var dataToSend={}; 
     $('input').each(function() { 
     dataToSend[$(this).attr('id')]=$(this).val();// create your object 
     }); 

     $.ajax({ 
     url: 'some_ajax.php', 
     type: 'POST', 
     dataType: 'html', 
     data:dataToSend, 
     success: function(data, textStatus, xhr) { 
      console.log('success'); 
     } 
     }); 

    }); 

    });