Question

我在PHP页面中有一个下拉菜单，列出了公共目录中的文件。

当用户在此目录中添加或删除文件时，如何更新此列表？

Answer 1

更新了答案

根据评论，以下HTML代码包含了基本工作示例所需的全部内容。

要测试它，只需将代码复制+粘贴到新的HTML文件中，保存更改并将文件放在Web服务器上的文件夹中，以便可以通过文本访问（例如＆＃34; docroot＆＃34;），然后使用您的网络浏览器导航到它。

根据需要更改代码，请注意用于包含以下代码中名称的文本文件的文件名称为：＆＃39; file.txt＆＃39 ;;所以，只要你喜欢改变它。

overrideMimeType方法确保内容为＆＃34;纯文本＆＃34;。

这是演示

<html>
    <head>
        <style>
            body
            {
                font-family:Arial,Helvitica,Sans;
            }

            .item
            {
                width:256px;
                padding:0.5em;
                background:#EEE;
                border:1px solid #DDD;
                font-weight:bold;
            }
        </style>
        <script>
            function load(path,call)
            {
                var sock = new XMLHttpRequest();

                sock.open('GET',path);
                sock.overrideMimeType('text/plain; charset=x-user-defined');
                sock.addEventListener
                (
                    'load',function()
                    {
                        call(this.responseText);
                    }
                );

                sock.send();
            }
        </script>
    </head>
    <body>
        <div id="menu">
            <div class="item">demo</div>
        </div>

        <script>
            setInterval
            (
                function()
                {
                    load('file.txt',function(text)
                    {
                        var menu = document.getElementById('menu');
                        var tags = (menu.innerHTML).split('demo');

                        menu.innerHTML = '';

                        (text.split("\n")).forEach(function(file)
                        {
                            menu.innerHTML += (tags[0] + file + tags[1]);
                        });
                    });
                },
                1000; // refresh every 1 second(s)
            );
        </script>
    </body>
</html>

<强>建议

我宁愿建议保存这个＆＃34;文本文件＆＃34;作为＆＃34; JSON＆＃34;，这样您就不需要显式地解析内容，然后您可以将responseType（在＃34;加载＆＃34;函数中）设置为＆＃39; JSON＆＃39;它将被自动解析。

无论如何，上面的代码应该对您有用，如果需要澄清，请发表评论。

只要页面打开，保持下拉列表更新

1 个答案: