服務端Json數據+js表單數據提交的 表單交互插件（base-form.js）
我們在做表單的查看、編輯裏涉及兩個點：
點1，提交Form表單到服務器，保存到數據庫
點2，頁面顯示Form表單裏的所有字段
如果表單的字段很多，這兩個點會有兩個問題：
1，提交Form時，如何少量代碼、快速獲取表單的所有數據？
2，頁面顯示Form表單時，如何自動給表單的所有字段自動賦值，而不要一個一個屬性地寫代碼？
針對這兩個問題，我有一個推薦的做法，下面以Demo舉例：
1）index.html或index.jsp裏寫一個form表單,引入jquery.js：
<srcript type="text/javascript" src="jquery.js"></script>
<srcript type="text/javascript" src="demo-form.js"></script>
<form id="demoForm">
<input type="text" name="username" class="formitem"/>
<input type="radio" name="usersex" class="formitem" value="1"/>男
<input type="radio" name="usersex" class="formitem" value="0"/>女
<input type="button" value="提交"/>
</form>
需要註意的有兩點：
1.1）所有表單字段要加一個class: formitem，因為base-form.js插件根據這個來匹配查找
1.2）name值要和服務端返回的Json數據屬性一樣
2）提交數據時的js代碼如下：
var formdata = $(‘#demoForm‘).serialize();
$.ajax({
type: "get",
data: formdata ,
url: url,
cache: false,
error: function (err) {
alert(err);
},
success: function (data) {
//在這裏處理返回的數據
if(data && data["code"]=="ok"){
var theData = data["data"];//這裏就是你需要的數據
}
}
});
3）從服務器獲取Json數據
$.ajax({
type: "get",
data: {"id":1},
url: url,
cache: false,
error: function (err) {
alert(err);
},
success: function (data) {
//在這裏處理返回的數據
if(data && data["code"]=="ok"){
var theData = data["data"];//這裏就是你需要的數據
renderForm(theData);
}
}
});
function renderForm(data){
//data的數據結構是：{"username":"淡然","usersex":1}
$("#demoForm").setForm(data);
}
//這樣頁面上就自動給上面的demoForm表單的所有字段賦值了
Ok，Demo示例完成，只需要短短的兩代碼，就能完成前端頁面表單字段數據的提交、渲染。
：：：：：：
var formdata = $(‘#demoForm‘).serialize();
$("#demoForm").setForm(data);
附件： base-form.js
服務端Json數據+js表單數據提交的 表單交互插件（base-form.js）