Javascript讀取並顯示文件內容

Question

我想讀取保存在同一文件夾中的文件。 然后，我想在index.html中的div中顯示其內容。 問題：當我使用require("fs")它沒有運行，因為它沒有在服務器端運行。 我一直在環顧四周，找不到簡單的答案。 我想讓我的網站更具動態性，因此下面是單擊按鈕時應觸發的代碼：

function videos() {
    var body = *read a file("insertfilename")*;
    console.log(body);
    document.getElementById("body").innerHTML = body;
}

在這種情況下，“ body”就是我給div的ID。

！編輯！

現在進一步解釋。 我想將其用作我的主要網站。 當我轉到那里時，應該打開一個空的html文件，該文件具有一個腳本文件作為源。 “加載”它應該讀取一個文件，該文件也已經在服務器上，並將其內容放入正文中的div中。 如果單擊熱鏈接或按鈕，它將讀取另一個文件，然后將內容放入該div中。 也許這可以讓我澄清一下我要做什么。 我不想重新加載以打開我的其他站點。

Answer 1

由於您沒有使用服務器，因此似乎需要進行一些基本的文件提取。 您是否嘗試過FileReader for javascript ？ 這是一個非常簡單明了的對象。 該頁面上的示例似乎與您要完成的操作類似，只是您要獲取文件而不是用戶。

Answer 2

您可以使用AJAX。 它代表異步JavaScript和XML。 您可以使用它向服務器發送異步請求。 只要確保您所請求的文件與JS文件位於同一域即可。

function videos() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() { //this will execute when you receive response from the server
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("body").innerHTML = this.responseText;
            console.log(this.responseText)
        }
    };
    xhttp.open("GET", "filename.txt", true);
    xhttp.send();
}

如果您想了解更多， 這里是W3schools教程。