php 获取jq表单数据,jQuery实现获取form表单内容及绑定数据到form表单操作分析

本文实例讲述了jQuery实现获取form表单内容及绑定数据到form表单操作。分享给大家供大家参考，具体如下：

在日常开发的过程中，难免会用到form表单，我们需要获取表单的数据保存到数据库，或者拿到后台的一串json数据，要将数据绑定到form表单上，这里我写了一个基于jquery的，formHelp插件，使用起来也很简单：

获取表单的数据：$("#formid").serializeJson();

绑定数据到表单：$("#formid").setForm(json);

jquery.formHelp.js插件

/**

* 将form里面的内容序列化成json

* 相同的checkbox用分号拼接起来

* @param {dom} 指定的选择器

* @param {obj} 需要拼接在后面的json对象

* @method serializeJson

* */

$.fn.serializeJson=function(otherString){

var serializeObj={},

array=this.serializeArray();

$(array).each(function(){

if(serializeObj[this.name]){

serializeObj[this.name]+=';'+this.value;

}else{

serializeObj[this.name]=this.value;

}

});

if(otherString!=undefined){

var otherArray = otherString.split(';');

$(otherArray).each(function(){

var otherSplitArray = this.split(':');

serializeObj[otherSplitArray[0]]=otherSplitArray[1];

});

}

return serializeObj;

};

/**

* 将josn对象赋值给form

* @param {dom} 指定的选择器

* @param {obj} 需要给form赋值的json对象

* @method serializeJson

* */

$.fn.setForm = function(jsonValue){

var obj = this;

$.each(jsonValue,function(name,ival){

var $oinput = obj.find("input[name="+name+"]");

if($oinput.attr("type")=="checkbox"){

if(ival !== null){

var checkboxObj = $("[name="+name+"]");

var checkArray = ival.split(";");

for(var i=0;i

for(var j=0;j

if(checkboxObj[i].value == checkArray[j]){

checkboxObj[i].click();

}

}

}

}

}

else if($oinput.attr("type")=="radio"){

$oinput.each(function(){

var radioObj = $("[name="+name+"]");

for(var i=0;i

if(radioObj[i].value == ival){

radioObj[i].click();

}

}

});

}

else if($oinput.attr("type")=="textarea"){

obj.find("[name="+name+"]").html(ival);

}

else{

obj.find("[name="+name+"]").val(ival);

}

})

}

html测试代码

jQueryFormHelp练习

$(function () {

$("#form").setForm({a: '张三家的附近可考虑将', b: '王五', c: '王五', d: 'nishi yaldjlkfjal ',e:7,f:'8;10',i:'王'});

});

function submitForm(){

console.log($("#form").serializeJson('id:12;name:13;'));

}

5

6

7

王

小

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

希望本文所述对大家jQuery程序设计有所帮助。