serializeobjectjs表单字段序列化传参

来源:https://www.sucaihuo.com/php/1075.html 2016-12-16 07:20浏览(1329) 收藏

今天介绍一款jquery.serialize-object.js插件,它能够s把表单的值快速传给后台。
serializeobjectjs表单字段序列化传参
分类:表单代码 > 表单插件 难易:初级
下载资源 下载积分: 20 积分

表单html代码

<form class="form-horizontal" role="form" id="myform" action="" method="post"> 
    <div class="form-group"> 
        <label for="email" class="col-sm-2 control-label">Email</label> 
        <div class="col-sm-10"> 
            <input type="email" class="form-control" id="email" name="user[email]" placeholder="Email" value="demo@sucaihuo.com"> 
        </div> 
    </div> 
    <div class="form-group"> 
        <label for="email" class="col-sm-2 control-label">自我评价</label> 
        <div class="col-sm-10"> 
            <textarea class="form-control" name="user[intro]" rows="3"></textarea> 
        </div> 
    </div> 

    <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
            <button type="submit" class="btn btn-default" id="subbtn">提交</button> 
        </div> 
    </div>
</form>

把每个表单元素定义为如name="user[email]"数组的格式,这样方便表单的值序列化

$(function(){ 
    $(document).on('click', '#subbtn', function(event) { 
        event.preventDefault(); 
         
        var json_data = $('#myform').serializeJSON(); 
        $.post('post.php', json_data, function(data) { 
            console.log(data); 
        }); 
    }); 
});

返回值

{"user":{"email":"serialize@sucaihuo.com","skill":["html5","javascript","PHP","MySQL"],"salary":"5000","intro":"素材火"}}

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2