在不提交页面的情况下单击按钮显示文件答案

【问题标题】：Display file on button click without submitting page在不提交页面的情况下单击按钮显示文件
【发布时间】：2019-01-30 23:51:09
【问题描述】：

关于可见 div，我需要显示大量文件。基本上我有以下格式的 div，出现在下拉选择中。

<div id="PRJNA252931" class="invisible" style="position: absolute; top: 60px; right: 50px; background-color: #f1f1f1; width: 480px; height:190px; padding: 10px; border: #0000cc 2px solid; border-radius: 5px; overflow:auto;">
<?php $file="PRJNA252931"; $content="<code><pre>".htmlspecialchars(file_get_contents("layout/files/Project_Detail/$file"))."</pre></code>";echo $content;?>
</div>

所以我需要显示div对应的文件可见。

此代码的问题是所有文件都是在页面加载时加载的，因此当文件数量增加时页面变得更慢。

所以为了解决这个问题，我想在该 div 中单击按钮加载内容。

我是新手，请帮忙。

否则我什至可以使用以下 shell 命令从网络获取数据

for i in `esearch -db sra -query PRJNA252931 | efetch --format runinfo
|cut -d "," -f 1|tail -n +2`;do echo $i; efetch --format xml -id $i
-db sra |xtract -pattern SAMPLE_ATTRIBUTE -element TAG -element VALUE|sed 's/^/\t/g'; done)

所以我不知道如何在不加载整个页面的情况下执行脚本，以及如何在替换按钮的同一个 div 中显示内容。

【问题讨论】：

看看 AJAX：en.wikipedia.org/wiki/Ajax_%28programming%29。这是一个太大的话题，无法在这里讨论，所以做几个教程，看看它是如何工作的。

标签： javascript php html button onclick

【解决方案1】：

动态加载内容是 JavaScript 的完美场景。我们将使用新的Fetch API 来动态获取文件上的内容，并将其添加到框中。

<!-- Display div -->
<div id="PRJNA252931" class="invisible" style="position: absolute; top: 60px; right: 50px; background-color: #f1f1f1; width: 480px; height:190px; padding: 10px; border: #0000cc 2px solid; border-radius: 5px; overflow:auto;">
    <?php
        $file = "PRJNA252931";

        // Here we add a button that calls loadFile() when it is clicked, function parameters are the button element itself and the file URL we want to download
        $content = "
            <code>
                <button onclick='loadFile($(this), \"layout/files/Project_Detail/".$file."\");'
            </code>
        ";

        echo $content;
    ?>
</div>

<!-- JavaScript -->
<script>
    function loadFile(btn, file)
    {
        // Use Fetch API to get the file, then replace the button we click with the contents of that file
        fetch(file).then((resp) => resp.text()).then(function(data) {
            btn.replaceWith(data);
        });
    }
</script>

【讨论】：

每次看到“JavaScript”和“new”，我总是想知道这个月的新口味是什么，但这真的很好看。

【解决方案2】：

谢谢加里，

是的，当我将按钮放在 php 之外时，这有效。

<div id="PRJNA252931" class="inv" style="position: absolute; top: 60px; right: 50px; background-color: #f1f1f1; width: 480px; height:190px; padding: 10px; border: #0000cc 2px solid; border-radius: 5px; overflow:auto;">
<button type="button" name="PRJNA252931_btn" id="PRJNA252931_btn" onclick="loadFile(PRJNA252931_btn, 'layout/files/Project_Detail/PRJNA252931')">Load Detail</button>
</div>

我面临的唯一问题是所有数据都排成一行。 this is the original file

This is how it is appearing

有关使选项卡和新行可见或为显示的数据设置样式的任何建议。

【讨论】：