layui使用serializeJson报Uncaught TypeError: $(...).serializeJson is not a function错

layui使用serializeJson报Uncaught TypeError: $(...).serializeJson is not a function错

报错原因是没有layui自带的jquery中没有对应这个方法。

二种解决办法：

1是引入自定义jquery,然后引入jquery-serialize-json插件（无效）；

2是直接编写对应函数（有效）本文表示这种方法的记录。

index.html:91 Uncaught TypeError: $(...).serializeJson is not a function
    at r.<anonymous> (index.html:91:74)
    at HTMLDocument.<anonymous> (VM8764 layui.js:1:1773)
    at l (VM8764 layui.js:2:9223)
    at Object.fireWith [as resolveWith] (VM8764 layui.js:2:9992)
    at Function.ready (VM8764 layui.js:2:11811)
    at HTMLDocument.s (VM8764 layui.js:1:45629)

 

编制自定义的serializeJson函数，内容如下即可解决。

            $.fn.serializeJson = function () {
               	var serializeObj = {};
               	var array = this.serializeArray();
               	$.each(array, function () {
               		if (serializeObj[this.name] !== undefined) {
               			if (!serializeObj[this.name].push) {
               				serializeObj[this.name] = [serializeObj[this.name]];
               			}
               			serializeObj[this.name].push(this.value || '');
               		} else {
               			serializeObj[this.name] = this.value || '';
               		}
               	});
               	return serializeObj;
            };

 

 

由于使用的layui,先引入了自定义的jquery，然后在引入jquery-serialize-json这个插件，还是没有自动生效。

<script th:src="@{/layuiadmin/layui/layui.js}" src="../../layuiadmin/layui/layui.js"></script>
<!-- <script th:src="@{/jquery/jquery-3.6.3.js}" src="../../jquery/jquery-3.6.3.js"></script> --> 
<!-- <script th:src="@{/jquery/serializejson/jquery.serializejson.js}" src="../../jquery/serializejson/jquery.serializejson.js"></script>   -->

 

最后还是使用的layui自带的jquery，然后自定义扩展的这个方法。

<script th:src="@{/layuiadmin/layui/layui.js}" src="../../layuiadmin/layui/layui.js"></script>
<!-- <script th:src="@{/jquery/jquery-3.6.3.js}" src="../../jquery/jquery-3.6.3.js"></script> --> 
<!-- <script th:src="@{/jquery/serializejson/jquery.serializejson.js}" src="../../jquery/serializejson/jquery.serializejson.js"></script>   -->
<script th:inline="none">

    layui.use( function () {
            let $ = layui.$
                , view = layui.view
                , form = layui.form //form
                , table = layui.table; //表格
            $.fn.serializeJson = function () {
               	var serializeObj = {};
               	var array = this.serializeArray();
               	$.each(array, function () {
               		if (serializeObj[this.name] !== undefined) {
               			if (!serializeObj[this.name].push) {
               				serializeObj[this.name] = [serializeObj[this.name]];
               			}
               			serializeObj[this.name].push(this.value || '');
               		} else {
               			serializeObj[this.name] = this.value || '';
               		}
               	});
               	return serializeObj;
            };
            //渲染form
            form.render(null, 'layadmin-merchant-formlist');
            //监听搜索
            form.on('submit(LAY-merchant-search)', function (data) {
                //执行重载
                table.reload('LAY-merchant-manage', {
                    where: data.field,
                    page: {curr: 1}
                });
            });
            table.render({
                elem: '#LAY-merchant-manage'
                , url: '/merchant/index.html'
                , page: true
                , method: 'post'
                , even: true
                , where: $('div[lay-filter=layadmin-merchant-formlist]').serializeJson()
                , cols: [[{field: '', title: '序号', type: "numbers", fixed: "left"}
                    , {field: 'merchantNo', title: '商户号', hide: true}
                    , {field: 'merchantName', title: '企业名称'}
                    , {field: 'registerAddr', title: '营业地址'}
                    , {field: 'licenseNo', title: '经营认可号'}
                    , {field: 'legalPerson', title: '法定代表人'}
                    , {field: 'certificateType', title: '种类'}
                    , {title: '操作', toolbar: '#table-merchant-admin'}
                ]]
            });
            table.on('tool(LAY-merchant-manage)', function (obj) {
                if (obj.event === 'detail') {
                    admin.popup({
                        title: '商户详情'
                        , area: ['700px', '550px']
                        , id: 'LAY-popup-useradmin-add'
                        , success: function () {
                            view(this.id).render('/merchant/detail.html');
                        }
                    });
                }
            });
            table.on('row(LAY-merchant-manage)', function (obj) {
                obj.tr.addClass('layui-bg-black').siblings().removeClass('layui-bg-black');
            });
        });
</script>

 

附：

layui--将form表单序列化为json

将form表单序列化为json的事件

$.fn.serializeJson = function () {
	var serializeObj = {};
	var array = this.serializeArray();
	$.each(array, function () {
		if (serializeObj[this.name] !== undefined) {
			if (!serializeObj[this.name].push) {
				serializeObj[this.name] = [serializeObj[this.name]];
			}
			serializeObj[this.name].push(this.value || '');
		} else {
			serializeObj[this.name] = this.value || '';
		}
	});
	return serializeObj;
};

layui的form表单id为form_info，dataJson为序列化的值。

var dataJson = $("#form_info").serializeJson();