Bài đăng này đã được một năm ... nhưng tôi thực sự rất thích câu trả lời của ES6 @dzuc. Tuy nhiên, nó không đầy đủ bởi không thể xử lý nhiều hộp chọn hoặc hộp kiểm. Điều này đã được chỉ ra và các giải pháp mã đã được cung cấp. Tôi thấy chúng nặng và không được tối ưu hóa. Vì vậy, tôi đã viết 2 phiên bản dựa trên @dzuc để xử lý các trường hợp này:
- Đối với các biểu mẫu kiểu ASP trong đó tên nhiều mục có thể được lặp lại đơn giản.
let r=Array.from(fd).reduce(
(o , [k,v]) => (
(!o[k])
? {...o , [k] : v}
: {...o , [k] : [...o[k] , v]}
)
,{}
);
let obj=JSON.stringify(r);
Phiên bản Hotshot một dòng:
Array.from(fd).reduce((o,[k,v])=>((!o[k])?{...o,[k]:v}:{...o,[k]:[...o[k],v]}),{});
- Đối với các biểu mẫu kiểu PHP trong đó nhiều tên mục phải có một
[]hậu tố.
let r=Array.from(fd).reduce(
(o , [k,v]) => (
(k.split('[').length>1)
? (k=k.split('[')[0]
, (!o[k])
? {...o , [k] : [v]}
: {...o , [k] : [...o[k] , v ]}
)
: {...o , [k] : v}
)
,{}
);
let obj=JSON.stringify(r);
Phiên bản Hotshot một dòng:
Array.from(fd).reduce((o,[k,v])=>((k.split('[').length>1)?(k=k.split('[')[0],(!o[k])?{...o,[k]:[v]}:{...o,[k]:[...o[k],v]}):{...o,[k]:v}),{});
- Phần mở rộng của biểu mẫu PHP hỗ trợ mảng nhiều cấp.
Kể từ lần trước tôi đã viết trường hợp thứ hai trước đó, đã xảy ra trường hợp biểu mẫu PHP có hộp kiểm trên nhiều cấp. Tôi đã viết một trường hợp mới để hỗ trợ trường hợp trước và trường hợp này. Tôi đã tạo một đoạn mã để giới thiệu tốt hơn trường hợp này, kết quả hiển thị trên bảng điều khiển cho bản trình diễn này, hãy sửa đổi điều này theo nhu cầu của bạn. Đã cố gắng tối ưu hóa nó tốt nhất tôi có thể mà không ảnh hưởng đến hiệu suất, tuy nhiên, nó ảnh hưởng đến khả năng đọc của một số người. Lợi ích của mảng là các đối tượng và các biến trỏ đến mảng được giữ dưới dạng tham chiếu. Không hotshot cho cái này, hãy là khách của tôi.
let nosubmit = (e) => {
e.preventDefault();
const f = Array.from(new FormData(e.target));
const obj = f.reduce((o, [k, v]) => {
let a = v,
b, i,
m = k.split('['),
n = m[0],
l = m.length;
if (l > 1) {
a = b = o[n] || [];
for (i = 1; i < l; i++) {
m[i] = (m[i].split(']')[0] || b.length) * 1;
b = b[m[i]] = ((i + 1) == l) ? v : b[m[i]] || [];
}
}
return { ...o, [n]: a };
}, {});
console.log(obj);
}
document.querySelector('#theform').addEventListener('submit', nosubmit, {capture: true});
<h1>Multilevel Form</h1>
<form action="#" method="POST" enctype="multipart/form-data" id="theform">
<input type="hidden" name="_id" value="93242" />
<input type="hidden" name="_fid" value="45c0ec96929bc0d39a904ab5c7af70ef" />
<label>Select:
<select name="uselect">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</label>
<br /><br />
<label>Checkboxes one level:<br/>
<input name="c1[]" type="checkbox" checked value="1"/>v1
<input name="c1[]" type="checkbox" checked value="2"/>v2
<input name="c1[]" type="checkbox" checked value="3"/>v3
</label>
<br /><br />
<label>Checkboxes two levels:<br/>
<input name="c2[0][]" type="checkbox" checked value="4"/>0 v4
<input name="c2[0][]" type="checkbox" checked value="5"/>0 v5
<input name="c2[0][]" type="checkbox" checked value="6"/>0 v6
<br/>
<input name="c2[1][]" type="checkbox" checked value="7"/>1 v7
<input name="c2[1][]" type="checkbox" checked value="8"/>1 v8
<input name="c2[1][]" type="checkbox" checked value="9"/>1 v9
</label>
<br /><br />
<label>Radios:
<input type="radio" name="uradio" value="yes">YES
<input type="radio" name="uradio" checked value="no">NO
</label>
<br /><br />
<input type="submit" value="Submit" />
</form>
JSON.stringify()giúp không? Có thể bạn cố gắng sửa chữa một cái gì đó có thể được thực hiện theo cách khác?