JavaScript对于Form的序列化和填充数据

来源：互联网发布：马云膨胀知乎编辑：程序博客网时间：2024/04/30 05:25

1、html页面代码

<body><form id="myform">用户名:<input type="text" name='username' id="username" /> <br /> 密码:<input type="password" name="password" id="password" /> <br /><input type="submit" value="提交表单" id="loginBtn" /><br /><input type="button" value="填充表单" id="fillBtb" /><br /></form></body>

2、关于JavaScript对于Form的序列化和填充数据的封装

var util = {serializeObject: function(form) {var formEL = $(form);var o = {};var a = formEL.serializeArray();$.each(a, function() {if(o[this.name]) {if(!o[this.name].push) {o[this.name] = [o[this.name]];}o[this.name].push(this.value || '');} else {o[this.name] = this.value || '';}});return o;},fillFormData: function(form, obj, isStatus) {var formEL = $(form);$.each(obj, function(index, item) {   formEL.find("[name=" + index + "]").val(item);});},empty: function(data) {if(null == data || "" == data) return true;else return false;}};

3、工具类的使用代码

<script type="text/javascript">$(function() {//获取表单数据$("#loginBtn").click(function() {var oForm = util.serializeObject("#myform");console.log(oForm)})//填充表单数据var formData = {username: "myusername",password: "mypassword"};$("#fillBtb").click(function() {util.fillFormData("#myform", formData);var oForm = util.serializeObject("#myform");console.log(oForm);})});</script>

4、完整的页面代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/form.js"></script><script type="text/javascript">$(function() {//获取表单数据$("#loginBtn").click(function() {var oForm = util.serializeObject("#myform");console.log(oForm)})//填充表单数据var formData = {username: "myusername",password: "mypassword"};$("#fillBtb").click(function() {util.fillFormData("#myform", formData);var oForm = util.serializeObject("#myform");console.log(oForm);})});</script></head><body><form id="myform">用户名:<input type="text" name='username' id="username" /> <br /> 密码:<input type="password" name="password" id="password" /> <br /><input type="submit" value="提交表单" id="loginBtn" /><br /><input type="button" value="填充表单" id="fillBtb" /><br /></form></body></html>

1 0