jquery获取form表单内容以及绑定数据到form表单

最新推荐文章于 2024-10-02 05:39:15 发布

aisajiang8962

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量276

点赞数

文章标签： javascript json 数据库 ViewUI

原文链接：http://www.cnblogs.com/cangowu/p/5124042.html

版权

本文介绍了如何使用jQuery的formHelp插件来方便地获取表单内容并将其序列化为JSON，以及如何将JSON数据绑定回表单。提供了`$("#formid").serializeJson();`用于获取数据，`$("#formid").setForm(json);`用于设置表单数据。还提及了相关JavaScript设计模式的文章。

摘要由CSDN通过智能技术生成

在日常开发的过程中，难免会用到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=<