2010-11-21 52 views
11

如何爲$.ajax提交此陣列? 這裏圖像返回["val1","val2"]但我用$.param(images)後我回來undefined=undefined&undefined=undefined在Jquery中序列化數組?

$('#rem_images').click(function(){ 
     var images = new Array(); 
     $('.images_set_image input:checked').each(function(i){ 
      images[i] = $(this).val(); 
     }); 
     alert($.param(images)); 
     return false; 

一般的想法是檢查圖像刪除網頁然後按一下按鈕環槽的所有圖像檢查和序列化陣列AJAX提交到PHP腳本。

回答

23

您沒有以適當的格式將數組傳遞給$.param。從jQuery.param docs

如果傳遞的目的是在一個數組,它必須是物體在由.serializeArray()返回的格式的陣列。

該數組應該是由名稱/值對組成的對象數組。您看到undefined=undefined&undefined=undefined,因爲"val1".name"val1".value,"val2".name"val2".value都未定義。它應該是這個樣子:

[{name: 'name1', value: 'val1'}, {name: 'name2', value: 'val2'}] 

所以,你可以構建這樣的陣列(假設你的複選框具有name屬性):

$('#rem_images').click(function(){ 
    var images = []; 
    $('.images_set_image input:checked').each(function(){ 
     var $this = $(this); 
     images.push({name: $this.attr('name'), value: $this.val()}); 
    }); 
    alert($.param(images)); 
    return false; 
}); 

即使雨衣,雖然是使用.map()(因爲函數式編程是好東西):

$('#rem_images').click(function(){ 
    var images = $('.images_set_image input:checked').map(function(){ 
     var $this = $(this); 
     return {name: $this.attr('name'), value: $this.val()}; 
    }).get(); 
    alert($.param(images)); 
    return false; 
}); 
+1

這件事情是我很難理解,但你的答案和一些調查,我能夠做到我想要什麼,謝謝你=) – Metafaniel 2012-06-15 19:58:10

7

docs for $.param

如果傳遞的對象是一個Array,它必須是物體在這意味着你需要生成同樣的方式排列()

[{name:"first",value:"Rick"}, 
{name:"last",value:"Astley"}, 
{name:"job",value:"Rock Star"}] 

由.serializeArray返回的格式的數組:

$('.images_set_image input:checked').each(function(i){ 
    images.push({ name: i, value: $(this).val() }); 
}); 
+0

你的回答對我也有幫助,非常感謝=) – Metafaniel 2012-06-15 19:58:31

0

我找到一個偉大的功能,要做到這一點從另一個問題 https://stackoverflow.com/a/31751351/4110122

與鍵值對這個函數的返回數組

$.fn.serializeObject = function() { 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      }  
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

要使用此只要致電:

var Form_Data = $('form').serializeObject(); 
console.log(Form_Data);