首页 > 代码库 > 服务端Json数据+js表单数据提交的 表单交互插件(base-form.js)
服务端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="http://www.mamicode.com/jquery.js"></script>
<srcript type="text/javascript" src="http://www.mamicode.com/demo-form.js"></script>
<form id="demoForm">
<input type="text" name="username" class="formitem"/>
<input type="radio" name="usersex" class="formitem" value="http://www.mamicode.com/1"/>男
<input type="radio" name="usersex" class="formitem" value="http://www.mamicode.com/0"/>女
<input type="button" value="http://www.mamicode.com/提交"/>
</form>
需要注意的有两点:
1.1)所有表单字段要加一个class: formitem,因为base-form.js插件根据这个来匹配查找
1.2)name值要和服务端返回的Json数据属性一样
2)提交数据时的js代码如下:
var formdata =http://www.mamicode.com/ $(‘#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 =http://www.mamicode.com/ $(‘#demoForm‘).serialize();
$("#demoForm").setForm(data);
附件: base-form.js
服务端Json数据+js表单数据提交的 表单交互插件(base-form.js)