我怎样才能读取在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我的服务器上。