jquery表单序列化 返回json对象 插件

/**
 * jquery 表单序列化 返回json对象 插件
 * 使用 $("#formCondition").serializeJson(); 返回json格式的数据 {start: "", end: "", nickname: ""}
 */
(function($){
    $.fn.serializeJson=function(){
        var serializeObj={};
        var array=this.serializeArray();
        $(array).each(function(){
            if(serializeObj[this.name]){
                if($.isArray(serializeObj[this.name])){
                    serializeObj[this.name].push(this.value);
                }else{
                    serializeObj[this.name]=[serializeObj[this.name],this.value];
                }
            }else{
                serializeObj[this.name]=this.value;
            }
        });
        return serializeObj;
    };
})(jQuery);

使用:
页面

<form id="formCondition" class="layui-form layui-col-md12 x-so">
          <input class="layui-input" placeholder="开始日" name="startTime" id="start">
          <input class="layui-input" placeholder="截止日" name="endTime" id="end">
          <input type="text" name="nickname"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
          <a class="layui-btn layui-btn-sm" onclick="getFormData()"><i class="layui-icon">&#xe615;</i> 检索</a>
          <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#x1006;</i> 重置</button>
</form>

js

	function getFormData(){
	   var data = $("#formCondition").serializeJson();
	   console.log(data);
	}

打印结果:
在这里插入图片描述

发布了47 篇原创文章 · 获赞 60 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43760328/article/details/98873302