HTML - 從javascript中的URL位置讀取.txt文件

我想要讀取.txt文件的URL位置，可以從http://www.puzzlers.org/pub/wordlists/pocket.txt開始說，並在我的頁面上處理其內容。HTML - 從javascript中的URL位置讀取.txt文件

你能指出我的一些教程或一些基本的代碼，如何在JavaScript中做到這一點？

我有一個基本的HTML代碼，我有一些表，我想從給定的URL位置的.txt文本填充它們，但我不知道如何從該位置讀取數據。

<html> 
<head> 
    <title>Pseudoganglia Interface</title> 
    <!-- CSS goes in the document HEAD or added to your external stylesheet --> 
    <style type="text/css"> 
    table.gridtable { 
    font-family: verdana,arial,sans-serif; 
    font-size:11px; 
    color:#333333; 
    border-width: 1px; 
    border-color: #666666; 
    border-collapse: collapse; 
    } 
    table.gridtable th { 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #dedede; 
    } 
    table.gridtable td { 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #ffffff; 
    } 
    </style> 
    <!-- Table goes in the document BODY --> 
    <script> 
    function getText() 
    { 
    // read text from URL location 
    } 
    function populateTables() { 
     var tableHP = document.getElementById("tHP"); 
     // Create an empty <tr> element and add it to the 1st position of the table: 
     var row = tableHP.insertRow(tableHP.rows.length); 
     // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element: 
     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(1); 

     // Add some text to the new cells: 
     cell1.innerHTML = "NEW CELL1"; 
     cell2.innerHTML = "NEW CELL2"; 
    } 
    </script> 
</head> 
<body onload="populateTables()"> 
<table class="gridtable" id="tHP"> 
    <tr> 
<th colspan=2>HP</th> 
    </tr> 
    <tr> 
<td># SN</td> 
<td>% of used RAM</td> 
    </tr> 
</table> 

<br> 

<table class="gridtable" id="tIBM"> 
    <tr> 
<th colspan=2>IBM</th> 
    </tr> 
    <tr> 
<td># CN</td> 
<td>% of used RAM</td> 
    </tr> 
</table> 
</body> 
</html>

來源

2015-03-03 Simon

你有過哪些有這個文本文件中的位置控制？ – krishgopinath 2015-03-03 09:22:08

您正在尋找的搜索字詞是Ajax。世界不需要另一個Ajax教程（所以投票結果太寬泛）。 – Quentin 2015-03-03 09:26:25

這不是太寬泛，它只是重複：http://stackoverflow.com/questions/15547407/javascript-read-text-file-using-ajax – CyberDude 2015-03-03 09:33:48

這段代碼可以幫助你：

function getText(){ 
 
    // read text from URL location 
 
    var request = new XMLHttpRequest(); 
 
    request.open('GET', 'http://www.puzzlers.org/pub/wordlists/pocket.txt', true); 
 
    request.send(null); 
 
    request.onreadystatechange = function() { 
 
     if (request.readyState === 4 && request.status === 200) { 
 
      var type = request.getResponseHeader('Content-Type'); 
 
      if (type.indexOf("text") !== 1) { 
 
       return request.responseText; 
 
      } 
 
     } 
 
    } 
 
} 
 
function populateTables(){ 
 
    
 
    var outer_text = getText(); 
 
    outer_text = outer_text.split('\n'); // you can adjust the manner of parsing the received file (regexp) 
 
    
 
    var tableHP = document.getElementById("tHP"); 
 
// Create an empty <tr> element and add it to the 1st position of the table: 
 
    var row = tableHP.insertRow(tableHP.rows.length); 
 
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element: 
 
    var cell1 = row.insertCell(0); 
 
    var cell2 = row.insertCell(1); 
 

 
// Add some text to the new cells: 
 
    cell1.innerHTML = outer_text[0]; 
 
    cell2.innerHTML = outer_text[1]; 
 
}

來源

2015-03-03 09:52:11 RomanPerekhrest

我遇到了與上面相同的問題。對於'request.readyState'，我得到'4'的值，對於'request.status'我得到'0'的值。你知道什麼可能導致這種情況，我應該如何解決它？ – Simon 2015-03-03 10:08:44

對於'var type = request.getResponseHeader（'Content-Type'）;''我得到'null'。 – Simon 2015-03-03 10:11:46

也許，您沒有權限從另一個域請求資源（ES同源策略）。在「that」域上應該設置下面的頭文件：header（'Access-Control-Allow-Origin：*'）; – RomanPerekhrest 2015-03-03 11:18:34

HTML - 從javascript中的URL位置讀取.txt文件

回答

相關問題