A-Fu Design

form2js 轉換後資料內容

現在的網頁越來越多使用AJAX 的方式來撰寫，目前在網頁上常見的格式以 JSON 、XML 較為常見，而在使用 jQuery 因為它本身對 JSON 格式的資料支援度很好，所以常常被拿來做資料交換或轉換，現在要介紹的這一個 jQuery 套件就是能夠直接把表單的內容和元素個體，先轉為 JSON 格式，讓 JavaScripts 可以先處理內容也可以直接把一整個 JSON 的物件傳送給伺服器端做處理，在程式的處理上就會減少很多的步驟。

使用方法：
第一步 載入  jqIpLocation 的 JavaScript 檔案
<!--form2js 轉換的主程式碼-->
<script type="text/javascript" src="../src/form2object.js"></script>
<!--JSON 的格式內容-->
<script type="text/javascript" src="json2.js"></script>

第二步 寫入表單內容
<form id="testForm" action="javascript:test()">
<dl>
<dt><label for="nameFirst">First name:</label></dt>
<dd><input id="nameFirst" type="text" name="person.name.first"/></dd>
</dl>

<dl>
<dt><label for="nameLast">Last name:</label></dt>
<dd><input id="nameLast" type="text" name="person.name.last"/></dd>
</dl>

<dl>
<dt>Gender:</dt>
<dd><label><input type="radio" name="person.gender" id="genderMale" value="male" /> Male</label></dd>
<dd><label><input type="radio" name="person.gender" id="genderFemale" value="female" /> Female</label></dd>
</dl>

<dl>
<dt>City</dt>
<dd>
<select name="person.city">
<optgroup label="Russia">
<option value="msk">Moscow</option>
<option value="spb">St. Petersburg</option>
<option value="nsk">Novosibirsk</option>
<option value="ekb">Ekaterinburg</option>
</optgroup>
<optgroup label="Europe">
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="madrid">Madrid</option>
</optgroup>
</select>
</dd>
</dl>

<dl>
<dt>Favorite food</dt>
<dd><label><input type="checkbox" name="person.favFood[]" value="steak"/> Steak</label></dd>
<dd><label><input type="checkbox" name="person.favFood[]" value="pizza"/> Pizza</label></dd>
<dd><label><input type="checkbox" name="person.favFood[]" value="chicken"/> Chicken</label></dd>
</dl>

</form>
<pre><code id="testArea">
</code></pre>
第三步 寫入 JavaScript 的動作內容
<script type="text/javascript">
function test()
{
var formData = form2object('testForm', '.', true,
function(node)
{
if (node.id && node.id.match(/callbackTest/))
{
return { name: node.id, value: node.innerHTML };
}
});

document.getElementById('testArea').innerHTML = JSON.stringify(formData, null, '\t');
}
</script>


作者網站：http://maxatwork.github.io/form2js/
檔案大小：23 KB (包含範例)
檔案下載：http://github.com/maxatwork/form2js/zipball/master
備份下載：下載