如何通过ajax在单个对象中发送多个复选框值

时间:2017-08-25 11:43:48

标签: javascript jquery ajax checkbox

我有一个包含4个不同复选框的表单,其中包含filter_AFFILIATION_1,filter_AFFILIATION_2等等,直到4.我试图通过使用ajax调用动态地将选中的复选框值发送到服务器。这是我的代码:

    $('input[type="checkbox"]').change(function(){   
    var ids = ['filter_AFFILIATION_1','filter_AFFILIATION_2','filter_AFFILIATION_3','filter_AFFILIATION_4'];    
    for(var i = 0; i < ids.length; i++){
      if(document.getElementById(ids[i]).checked === true){
      var data = {};
      data['request'+i] =  $('#'+ ids[i]).val();            
      console.log(data);
        }
    }

     $.ajax({
            type: 'POST', 
            url: Routing.generate('listingpage'),
            contentType: 'application/x-www-form-urlencoded',
            data: data,        
        success: function(result,status,xhr){
            console.log(result);
        }

如果你看一下

data['request'+i] =  $('#'+ ids[i]).val();            
      console.log(data);

部分代码,如果我点击

,则输出console.log
  1. 只有第一个复选框

    {request0: "1"}

  2. 第一个,然后是第二个复选框

    {request0: "1"}

    {request1: "2"}

  3. 首先是第二个,然后是第三个复选框

    {request0: "1"}

    {request1: "2"}

    {request2: "3"}

  4. 先是第二个,然后是第三个,然后取消选中第二个复选框

    {request0: "1"}

    {request2: "3"}

  5. 现在我的问题是我想将数据作为单个对象而不是多个对象发送,例如,如果用户单击第一个复选框,然后第二个,则控制台.log(数据)的输出应为

     `{request0: "1", request1: "2"}`
    

    我尝试了很多不同的方法,但似乎没什么用。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

您正在覆盖data个对象。你想要的是在data循环之外声明for对象,然后将新的键值对添加到循环中预先存在的对象中:

$('input[type="checkbox"]').change(function() {
    var ids = ['filter_AFFILIATION_1', 'filter_AFFILIATION_2', 'filter_AFFILIATION_3', 'filter_AFFILIATION_4'];

    // Create object outside of for loop
    var data = {};

    // Iterate through ids array
    for (var i = 0; i < ids.length; i++) {

        if (document.getElementById(ids[i]).checked === true) {

            // Create new key in pre-existing data object and assign value
            data['request' + i] = $('#' + ids[i]).val();

        }
    }

    // Just logging, to check
    console.log(data);

    // Request
    $.ajax({
        type: 'POST',
        url: Routing.generate('listingpage'),
        contentType: 'application/x-www-form-urlencoded',
        data: data,
        success: function(result, status, xhr) {
            console.log(result);
        }
    });
});