ฉันมีปัญหาเดียวกันเมื่อเร็ว ๆ นี้และออกมาพร้อมกับปลั๊กอิน. toJSON jQuery นี้ซึ่งแปลงฟอร์มเป็นวัตถุ JSON ที่มีโครงสร้างเดียวกัน นอกจากนี้ยังมีประโยชน์อย่างยิ่งสำหรับรูปแบบที่สร้างขึ้นแบบไดนามิกที่คุณต้องการให้ผู้ใช้ของคุณเพิ่มเขตข้อมูลเพิ่มเติมในสถานที่เฉพาะ
ประเด็นก็คือคุณอาจต้องการสร้างฟอร์มเพื่อให้มีโครงสร้างเองดังนั้นสมมติว่าคุณต้องการสร้างฟอร์มที่ผู้ใช้แทรกสถานที่โปรดของเขาในเมือง: คุณสามารถนึกภาพฟอร์มนี้เพื่อแสดง<places>...</places>
องค์ประกอบ XML ที่มี รายการสถานที่ที่ผู้ใช้ชอบดังนั้นจึงเป็นรายการ<place>...</place>
องค์ประกอบที่มีตัวอย่างเช่น<name>...</name>
องค์ประกอบ<type>...</type>
องค์ประกอบจากนั้นรายการ<activity>...</activity>
องค์ประกอบเพื่อแสดงกิจกรรมที่คุณสามารถดำเนินการในสถานที่ดังกล่าว ดังนั้นโครงสร้าง XML ของคุณจะเป็นดังนี้:
<places>
<place>
<name>Home</name>
<type>dwelling</type>
<activity>sleep</activity>
<activity>eat</activity>
<activity>watch TV</activity>
</place>
<place>...</place>
<place>...</place>
</places>
มันจะเจ๋งขนาดไหนที่จะมีวัตถุ JSON ออกมาจากสิ่งนี้ซึ่งจะแสดงโครงสร้างที่แน่นอนนี้ดังนั้นคุณจะสามารถ:
- เก็บวัตถุนี้ไว้ในฐานข้อมูลใด ๆ ที่เหมือนCouchDB
- อ่านจากฝั่งเซิร์ฟเวอร์ $ _POST [] ของคุณและเรียกคืนอาร์เรย์ที่ซ้อนกันอย่างถูกต้องแล้วคุณสามารถจัดการความหมาย
- ใช้สคริปต์ฝั่งเซิร์ฟเวอร์เพื่อแปลงเป็นไฟล์ XML ที่มีการจัดรูปแบบที่ดี (แม้ว่าคุณจะไม่ทราบโครงสร้างที่แน่นอนก่อนหน้า)
- ใช้อย่างใดอย่างหนึ่งตามที่อยู่ในสคริปต์เซิร์ฟเวอร์ใด ๆ ของNode.js
ตกลงดังนั้นตอนนี้เราต้องคิดว่าแบบฟอร์มสามารถแสดงไฟล์ XML ได้อย่างไร
แน่นอนว่า<form>
แท็กคือroot
แต่แล้วเราก็มี<place>
องค์ประกอบนั้นซึ่งเป็นคอนเทนเนอร์และไม่ใช่องค์ประกอบข้อมูลดังนั้นเราจึงไม่สามารถใช้แท็กอินพุตได้
นี่คือสิ่งที่<fieldset>
แท็กมีประโยชน์! เราจะใช้<fieldset>
แท็กเพื่อแสดงองค์ประกอบภาชนะทั้งหมดในรูปแบบ / XML ของเราเพื่อให้ได้ผลลัพธ์เช่นนี้:
<form name="places">
<fieldset name="place">
<input type="text" name="name"/>
<select name="type">
<option value="dwelling">Dwelling</option>
<option value="restoration">Restoration</option>
<option value="sport">Sport</option>
<option value="administrative">Administrative</option>
</select>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
</fieldset>
</form>
อย่างที่คุณเห็นในรูปแบบนี้เรากำลังทำลายกฎของชื่อที่ไม่ซ้ำกัน แต่นี่ก็โอเคเพราะพวกเขาจะถูกแปลงเป็นองค์ประกอบของอาร์เรย์ดังนั้นพวกเขาจะถูกอ้างอิงโดยดัชนีของพวกเขาภายในอาร์เรย์เท่านั้น
ณ จุดนี้คุณจะเห็นว่าไม่มีname="array[]"
ชื่อเหมือนในรูปแบบและทุกอย่างสวยเรียบง่ายและมีความหมาย
ตอนนี้เราต้องการให้แบบฟอร์มนี้ถูกแปลงเป็นวัตถุ JSON ซึ่งจะมีลักษณะดังนี้:
{'places':{
'place':[
{
'name': 'Home',
'type': 'dwelling',
'activity':[
'sleep',
'eat',
'watch TV'
]
},
{...},
{...}
]
}}
เมื่อต้องการทำสิ่งนี้ฉันได้พัฒนาปลั๊กอิน jQuery ที่นี่ซึ่งมีคนช่วยเพิ่มประสิทธิภาพในเธรดการทบทวนรหัสนี้และมีลักษณะดังนี้:
$.fn.toJSO = function () {
var obj = {},
$kids = $(this).children('[name]');
if (!$kids.length) {
return $(this).val();
}
$kids.each(function () {
var $el = $(this),
name = $el.attr('name');
if ($el.siblings("[name=" + name + "]").length) {
if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
obj[name] = obj[name] || [];
obj[name].push($el.toJSO());
}
} else {
obj[name] = $el.toJSO();
}
});
return obj;
};
ฉันทำโพสต์บล็อกนี้เพื่ออธิบายเพิ่มเติม
สิ่งนี้จะแปลงทุกอย่างในรูปแบบให้เป็น JSON (แม้แต่วิทยุและช่องทำเครื่องหมาย) และสิ่งที่คุณต้องทำก็แค่โทรออก
$.post('script.php',('form').toJSO(), ...);
ฉันรู้ว่ามีวิธีมากมายในการแปลงแบบฟอร์มเป็นวัตถุ JSON และตรวจสอบ.serialize()
และ.serializeArray()
ทำงานได้ดีในกรณีส่วนใหญ่และส่วนใหญ่จะใช้ แต่ฉันคิดว่าความคิดทั้งหมดนี้ของการเขียนแบบฟอร์มเป็นโครงสร้าง XML ที่มีชื่อที่มีความหมายและแปลงเป็น วัตถุ JSON ที่มีรูปแบบที่ดีนั้นควรค่าแก่การลองและความจริงที่ว่าคุณสามารถเพิ่มแท็กอินพุตชื่อเดียวกันโดยไม่ต้องกังวลมีประโยชน์มากหากคุณต้องการดึงข้อมูลฟอร์มที่สร้างขึ้นแบบไดนามิก
ฉันหวังว่านี่จะช่วยให้ใครบางคน!