使用jQuery序列化DIV屬性併發送到AJAX POST

我知道序列化與<FORM>一起工作，但它可以用於DIV嗎？使用jQuery序列化DIV屬性併發送到AJAX POST

<div class="row" shortname="1"></div> 
<div class="row" shortname="2"></div> 
<div class="row" shortname="3"></div> 
<div class="row" shortname="4"></div>

如何獲取所有DIV及其短名稱屬性並將所有內容傳遞給AJAX文章？

喜歡短名稱= 1個&短名稱= 2 &短名稱= 3個

謝謝！

來源

2012-11-15 Scott Yu - Front-End UX

它會更有效的，如果你的div是在一個類或有ID –

是的，我可以添加一個類到它。現在讓我來做例子。 –

你是否真的希望所有的屬性名稱都一樣？ – teddybeard

不，它不能與div一起工作，所以你必須創建一個解決方案。如果我可以假設這些div被包裹在一個父DIV，那麼這段代碼將工作

var queryString = ''; 
var x = 0; 
$('#parentdiv div').each(function(){ 
    if(x) queryString += '&'; 
    else x = 1; 
    queryString += 'shortname[]=' + $(this).attr("shortname"); 
});

如果他們沒有包裹在一個div，你想找到所有具有短名稱屬性的div，變化這個循環。

$('div').find('[shortname]').each(function(){ 
    // same stuff 
});

注意：我想你想要的簡稱是一個數組。如果你在沒有括號的情況下建立，你可能會一遍又一遍覆蓋「shortname」的值。

來源

2012-11-15 03:43:38

，你可以創建一個數組，並傳遞一個JSON，

var data=new Array(); 
    $('div.row').each(function(){ 
     data.push($(this).attr('shortname')) 
    }) 
    var jsonString=JSON.stringify(data);

來源

2012-11-15 03:46:20

無論如何要序列化它？後端預計序列化的url參數... –

您正在使用ajax後，爲什麼你需要他們在查詢字符串？ –

無論數據是否被序列化，後端都會得到相同的數據。 $ .ajax將接受一個對象（一個序列化的關聯數組是JS中的一個對象）或一個查詢字符串。它們在後端看起來都一模一樣。你只是傳遞數字，所以序列化只不過是你可以使用的一種方便，如果這些是表單元素而不是div。 –

可以建立與數組中的值，並通過該數組作爲對象的$就數據選項的一部分。

var shortnames = $('[shortname]').map(function(){ 
    return $(this).attr('shortname'); 
}).get(); 
ajax({ 
    .... 
    data:{shortname:shortnames}, 
    .... 
});

來源

2012-11-15 03:52:58 Musa

在Firefox Firebug中出現這個奇怪的錯誤：NS_ERROR_XPC_NOT_ENOUGH_ARGS：沒有足夠的參數[nsIDOMLocation.replace] –

@ ScottYu-UXdesigner現在用'.get（）'結尾嘗試。 – Musa

這是非常聰明的方式來做到這一點！ –

你可以做這樣的事情......

FIDDLE

var serialized = ''; 

$('#serializeme div').each(function(){ 

    serialized = serialized + 'shortname=' + $(this).attr('shortname') + '&'; 

});

來源

2012-11-15 03:53:30 VIDesignz

使用jQuery序列化DIV屬性併發送到AJAX POST

回答

相關問題