使用jquery的load方法加载layui的模板资源404

最新推荐文章于 2024-05-08 15:24:52 发布

caicai1171523597

最新推荐文章于 2024-05-08 15:24:52 发布

阅读量2.7k

点赞数 1

文章标签： vue jquery js java web

本文链接：https://blog.csdn.net/caicai1171523597/article/details/119273454

版权

需求是在父页面有个导航栏，点击导航栏，下面的内容区域使用jquery的load加载。
假设主页面为index.html，使用load加载的子页面为main.html。
其中，main.html里需要用到layui的级联选择器。
在layui官网插件市场找到扩展插件cascader，下载示例demo到本地。

运行正常：

接下来将main.html嵌入到index.html中，运行发现cascader插件依赖的laytpl.js资源加载404，如下图：

正确的路径应该是： http://127.0.0.1:5500/layui/lay/modules/laytpl.js
项目目录结构如下：

main.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keywords" content="hsiangleev,layui扩展">
    <title>layui扩展无限级联选择器</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="cascader.css" media="all">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon.ico">
</head>
<body>
    <button class="layui-btn">reload</button>
    <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
            <input type="text" id="a" class="layui-input" readonly="readonly">
        </div>
    </div>

    <script src="../layui/layui.js"></script>
    <script>
        layui.config({
            base: "../layui/lay/mymodules/"
        }).use(["jquery","cascader"], function(){
            var $ = layui.jquery;
            var cascader = layui.cascader;
            
            var data = [
                {
                    value: 'A',
                    label: 'a',
                    children: [
                        {
                            value: 'AA1',
                            label: 'aa1',
                        },
                        {
                            value: 'BB1',
                            label: 'bb1'
                        }
                    ]
                },
                {
                    value: 'B',
                    label: 'b',
                    children: [
                        {
                            value: 'AA2',
                            label: 'aa2',
                            children: [
                                {
                                    value: 'AAA3',
                                    label: 'aaa3',
                                    children: [
                                        {
                                            value: 'AAA3',
                                            label: 'aaa3',
                                            children: [
                                                {
                                                    value: 'AAA3',
                                                    label: 'aaa3',
                                                },
                                                {
                                                    value: 'BBB3',
                                                    label: 'bbb3'
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    value: 'BBB3',
                                    label: 'bbb3'
                                }
                            ]
                        },
                        {
                            value: 'BB2',
                            label: 'bb2',
                            children: [
                                {
                                    value: 'AAA4',
                                    label: 'aaa4',
                                },
                                {
                                    value: 'BBB4',
                                    label: 'bbb4'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'C',
                    label: 'c',
                }
            ]
            var cas=cascader({
                elem: "#a",
                data: data,
                // url: "/aa",
                // type: "post",
                // triggerType: "change",
                // showLastLevels: true,
                // where: {
                //     a: "aaa"
                // },
                value: ["B", "BB2", "BBB4"],
                // changeOnSelect: true,
                success: function (valData,labelData) {
                    console.log(valData,labelData);
                }
            });

            var reloadData=[
                {
                    value: 'A',
                    label: 'a',
                    children: [
                        {
                            value: 'AA1',
                            label: 'aa1',
                        },
                        {
                            value: 'BB1',
                            label: 'bb1'
                        }
                    ]
                }
            ]
            $(".layui-btn").on("click",function() {
                cas.reload({
                    data: reloadData,
                    value:['A','BB1']
                })
            })
            
        });
    </script>
        
</body>
</html>

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <h2>我是父窗口</h2>
   <div id="content"></div>
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script>
       $("#content").load("main.html"); 
   </script>
</body>
</html>

解决办法：

在main.html---里加入dir配置

image.png

dir指向layui.js 所在目录

caicai1171523597

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jquery的load方法加载layui的模板资源404

需求是在父页面有个导航栏，点击导航栏，下面的内容区域使用jquery的load加载。假设主页面为index.html，使用load加载的子页面为main.html。其中，main.html里需要用到layui的级联选择器。在layui官网插件市场找到扩展插件cascader，下载示例demo到本地。运行正常：接下来将main.html嵌入到index.html中，运行发现...
复制链接

扫一扫