如何在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');
        }
      });

    });

  });