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

时间:2016-12-21 09:47:32

标签: javascript jquery ajax

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
},

希望您了解我的需求。 :)

4 个答案:

答案 0 :(得分:1)

只需使用array

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

答案 1 :(得分:1)

我认为该数组符合您的需求

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

答案 2 :(得分:1)

当其中一个输入值发生变化时,您似乎试图发布所有input元素的idvalue

我建议您删除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>

答案 3 :(得分:0)

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

    });

  });