通過AJAX發送輸入數組

Question

過去我已經處理過javascript，但是我想重新學習它。 因此，我想提出一種JavaScript解決方案，而不使用JQuery之類的庫。

我遇到了幾個線程，它們雖然接近但並不完美。

我有一個由PHP動態生成的表單，它從數據庫中獲取信息，並回顯所有表單輸入。 它們都是代表數據庫中條目的復選框。 通常我會使用name =“ id [value]”，其中value是正在循環通過的當前條目的ID。

所以我會有這樣的事情：

<input type="checkbox" name="del[1]"/>
<input type="checkbox" name="del[2]"/>
<input type="checkbox" name="del[3]"/>

當我將其發布到表單提交時，我只會得到$ _POST ['del']的值並將其命名為一天。 但是，我試圖將其發送到具有AJAX函數的PHP頁面，以便我可以執行這些功能而無需更改頁面或刷新。

我的問題是：如何獲取所有選中的復選框，並將其發送到PHP頁面，以便它可以了解選中了哪些復選框。 我的理解是，這將需要某種轉換。 我的第一個方法是遍歷每個復選框，並獲取其索引（或為它們提供所有ID並獲取ID），然后將其放入字符串中，然后可以展開PHP端。

有什么想法嗎？ 謝謝，碼頭。

Answer 1

var i, child, str='', arr = Array(),
    form = document.getElementById('form')

for(i=0; i<form.childNodes.length; i++) {
    // grab the element
    var child = form.childNodes[i];
    // make sure it is an input and a checkbox
    if(child.tagName!='INPUT' || child.getAttribute('type')!='checkbox') continue
    // if the checkbox is checked, add the name and value to a url string
    if(child.checked)
        arr.push(child.getAttribute('name')+'='+encodeURIComponent(child.value))
    }
}

// make the URL string
str = arr.join('&')

// now you can use this as a url: 
SomeAjaxUrl + str

然后，在PHP中：

<?php
    $checked_options = $_REQUEST['del'];
    print_r($checked_options);
?>

Answer 2

你可以像你說的那樣使用jQuery並循環

http://api.jquery.com/attribute-starts-with-selector/

但是為了簡便起見，我會看一些類似於主干形式的內容https://github.com/powmedia/backbone-forms

它可以為您管理模型，並讓您輕松地通過ajax發送。

他們的github上有更多信息以及一些示例。 這將檢查框放置在可以輕松處理php端的數組中

編輯：純javascript

var pairs = [];
var form = document.getelementbyid("form");
for ( var i = 0; i < form.elements.length; i++ ) {
   var e = form.elements[i];
   pairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value));
}
var output= pairs.join("&");

您應該能夠輕松修改

Answer 3

使用JSON.stringify() （ MDN ）解決您的問題。 您可以將數組或對象轉換為可以通過AJAX發送的有效JSON對象 。