如何在ajax中使用相同的函数传递多个参数

Question

小提琴链接

这是我的功能，我需要使用相同的功能动态传递多个参数。 可以在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 。

我建议您删除HTML元素中的onkeypress事件处理程序，而是使用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

小提琴我认为你正在尝试做类似的事情

 $(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');
        }
      });

    });

  });