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();