Javascript中的HTML內容不能正常工作

我正在使用與我的HTML文件位於同一目錄中的外部引用的Javascript文件。Javascript中的HTML內容不能正常工作

我的JavaScript程序從「.txt文件」中讀取一些數據並將它們存儲在變量速度，海拔高度&壓力。我希望在我的HTML中顯示這些變量的值。但由於某些原因，這仍然不起作用。

JavaScript代碼：

var fs = require('fs'); 
fs.readFile('data.txt', 'utf8', function(error, data) { 
    var content = data; 
    console.log(content); 


    var obj = JSON.parse(content); 
    var speed = obj.speed_json; 
    console.log(speed); 
    var altitude = obj.altitude_json; 
    console.log(altitude); 
    var pressure = obj.pressure_json; 
    console.log(pressure); 
}); 

document.getElementById("pressurehtml").innerHTML = altitude; 
document.getElementById("speedhtml").innerHTML = speed; 
document.getElementById("altitudehtml").innerHTML = pressure;

HTML代碼：

<html> 

<body> 

    <h1 id="pressurehtml">Pressure</h1> 
    <h1 id="altitudehtml">Altitude</h1> 
    <h1 id="speedhtml">Speed</h1> 
    <script src="main.js"></script> 
</body> 

</html>

來源

2017-01-10 Jonathan Pereira

您正在使用'的NodeJS庫fs'。你不能從瀏覽器中讀取這樣的文件 –

你可以進一步解釋.. –

添加jQuery並將'fs.readFile（'data.txt'，'utf8'，function（error，data）{'to'$ .get 'data.txt'，function（data）{' – mplungjan

您所使用的JavaScript代碼的NodeJS，有正常的JavaScript沒有require或fs。要閱讀您的文件，請嘗試使用AJAX。

來源

2017-01-10 15:26:28 NikxDa

試試這個Javascript會創建一個ajax請求來加載你的JSON。

$.ajax({ 
    url: 'data.txt', 
    dataType: 'json', 
    success: function(data) { 
    var speed = data.speed_json; 
    var altitude = data.altitude_json; 
    var pressure = data.pressure_json; 

    // Append to HTML 
    document.getElementById("pressurehtml").innerHTML = altitude; 
    document.getElementById("speedhtml").innerHTML = speed; 
    document.getElementById("altitudehtml").innerHTML = pressure; 
    } 
});

此外一定要將jquery添加到您的html <head>。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

來源

2017-01-10 15:37:39

如何添加jquery到我的HTML？ –

@JonathanPereira看到我的更新答案我添加了如何在我的文章末尾添加jquery –

應該添加什麼代碼到HTML文件？@ Z-Bone。 –

您試圖在瀏覽器中使用服務器端node.js模塊。雖然node.js和web瀏覽器都使用javascript，但環境是不同的。在這種情況下，您試圖使用節點fs模塊，該模塊在瀏覽器環境中不可用。

在瀏覽器環境中讀取文件的最常見方式是發出HTTP請求。 Z-Bone的答案是使用JQuery一個很好的例子，這裏有一個僅使用XMLHttpRequest對象沒有外部的依賴關係：

var req = new XMLHttpRequest(); 
req.open('GET', 'data.txt', true); 

req.onreadystatechange = function(error) { 
    if (req.readyState === 4) { 
    if (req.status === 200) { 
     var content = req.responseText; 
     console.log(content); 

     var obj = JSON.parse(content); 
     var speed = obj.speed_json; 
     console.log(speed); 
     var altitude = obj.altitude_json; 
     console.log(altitude); 
     var pressure = obj.pressure_json; 
     console.log(pressure); 

     document.getElementById("pressurehtml").innerHTML = altitude; 
     document.getElementById("speedhtml").innerHTML = speed; 
     document.getElementById("altitudehtml").innerHTML = pressure; 

    } else { 
     console.error(req.statusText); 
    } 
    } 
}; 

req.send();

注意data.txt必須通過網絡服務器來用餐。如果您正在使用file：//處理程序嘗試在本地執行此操作，則由於瀏覽器CORS設置，此操作將不起作用。

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

來源

2017-01-10 15:58:50 msiadak

Javascript中的HTML內容不能正常工作

回答

相關問題