我怎樣才能讀取在JavaScript

Question

純文本/寫

我不知道很多關於JS，我在這個世界上是新的，我知道HTML和CSS，但是這一次我被要求作出aplication在哪裏必須從純文本接收數據到使用JS的公式。

這裏是我的純文本的data.txt：

Interfaces: test1, 
IP: 192.168.1.1, 
Mask : test, 
Gateway : test, 
DNS 1: test, 
DNS 2: test, 
Broadcast: test 

這是我的事業部：

<div class="col-md-12"> 
      <div class="form-panel"> 
      <h4><i class="fa fa-angle-right"></i> Formulario </h4> 
      <hr /> 
      <form method="post"> 
       <div class="form-group"> 
        <label class="col-sm-3 col-sm-3 control-label">Interfaces:</label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" 
        </div>  
       </div> 
       <div class="form-group "> 
        <label class="col-sm-3 col-sm-3 control-label">IP: </label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-3 col-sm-3 control-label">Mask : </label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-3 col-sm-3 control-label"> Gateway : </label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-3 col-sm-3 control-label">Broadcast : </label> 
        <div class="col-sm-9"> 
         <input type="text" class="form-control" 
        </div> 
       </div> 
       <br><br> 
       <div class="form-group"> 
        <button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button> 
       </div> 
      </form> 
     </div> 

這就是我從你們那裏拿到劇本，因爲我一直在尋找的代碼做到這一點，這就是我得到的。

的一點是，包含數據「data.tx」應該是我的處方，如果我修改任何領域那裏，我點擊「保存」按鈕，它在我的純文本寫爲好。

有沒有一種方法，使工作？謝謝！

整個代碼波紋管。

var mytext; 
 
var connection = new XMLHttpRequest(); 
 
connection.open('GET', '/data.txt'); 
 
connection.onreadystatechange = function() { 
 
mytext=connection.responseText; 
 
} 
 
connection.send();

<div class="col-md-12"> 
 
\t \t \t \t <div class="form-panel"> 
 
       <h4><i class="fa fa-angle-right"></i> Formulario </h4> 
 
       <hr /> 
 
\t \t \t \t <form method="post"> 
 
\t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t <label class="col-sm-3 col-sm-3 control-label">Interfaces:</label> 
 
         <div class="col-sm-9"> 
 
\t \t \t \t \t \t \t <input type="text" class="form-control" 
 
         \t </div>  
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t \t <div class="form-group "> 
 
\t \t \t \t \t \t <label class="col-sm-3 col-sm-3 control-label">IP: </label> 
 
         <div class="col-sm-9"> 
 
\t \t \t \t \t \t \t <input type="text" class="form-control" 
 
\t \t \t \t \t \t </div> 
 
        </div> 
 
\t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t <label class="col-sm-3 col-sm-3 control-label">Mask : </label> 
 
\t \t \t \t \t \t <div class="col-sm-9"> 
 
         \t <input type="text" class="form-control" 
 
\t \t \t \t \t \t </div> 
 
        </div> 
 
        <div class="form-group"> 
 
\t \t \t \t \t \t <label class="col-sm-3 col-sm-3 control-label"> Gateway : </label> 
 
\t \t \t \t \t \t <div class="col-sm-9"> 
 
         \t <input type="text" class="form-control" 
 
\t \t \t \t \t \t </div> 
 
        </div> 
 
        <div class="form-group"> 
 
\t \t \t \t \t \t <label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label> 
 
\t \t \t \t \t \t <div class="col-sm-9"> 
 
         \t <input type="text" class="form-control" 
 
\t \t \t \t \t \t </div> 
 
        </div> 
 
        <div class="form-group"> 
 
\t \t \t \t \t \t <label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label> 
 
\t \t \t \t \t \t <div class="col-sm-9"> 
 
         \t <input type="text" class="form-control" 
 
\t \t \t \t \t \t </div> 
 
        </div> 
 
        <div class="form-group"> 
 
\t \t \t \t \t \t <label class="col-sm-3 col-sm-3 control-label">Broadcast : </label> 
 
\t \t \t \t \t \t <div class="col-sm-9"> 
 
         \t <input type="text" class="form-control" 
 
\t \t \t \t \t \t </div> 
 
        </div> 
 
\t \t \t \t \t <br><br> 
 
\t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t <button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </form> 
 
\t \t \t </div> 
 
\t 
 
</div>

Answer 1

我不知道在一個更有效的解決方案存在，但下面的代碼工作。

這是我如何實現它，使用jQuery .load()

$(document).ready(function(){ 
    // Load the file in an hidden div element. 
    $("#hiddenFileLoad").load("data.txt", function(){ 
     // Callback executes when content is loaded 

     // Place the content in a var 
     var loadedText = $("#hiddenFileLoad").text(); 
     console.log("loadedText:\n\n"+loadedText); 

     // Split into an array 
     var loadedTextSplitted = loadedText.split(","); 

     // Remove the label part for each 
     for (i=0;i<loadedTextSplitted.length;i++){ 
      temp = loadedTextSplitted[i].split(": "); 
      loadedTextSplitted[i] = temp[1]; 
     } 

     // Place each info in the HTML form 
     $(".form-panel").find("input").each(function(index){ 
      $(this).val(loadedTextSplitted[index]); 
     }); 

    }); // End of .load callback 
}); 

我曾經和藏div，以加載.txt文件的內容，這是我給「hiddenFileLoad」 id。

我絕對沒有改變你的HTML（除了隱藏的div添加），我用你的txt文件內容。

我假設你知道如何保存到文件... 我沒有保存按鈕來工作。

Here is a live example我的服務器上。