JavaScriptでプレーンテキストから読み書きするにはどうすればいいですか？

Question

JSについてよく分かりませんが、私はこの世界では新しく、HTMLとCSSについては知っていますが、今度はJSを使用してプレーンテキストから私の処方箋にデータを受け取らなければなりません。

ここに私のテキストをdata.txtをです：

<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> 

私は、コードを探していたので、私はあなたたちからもらったスクリプトです：

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

ここに私の本部ですそれは私が得たものです。

ポイントは "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

私は私がより効率的なソリューションが存在しているかわからないが、コードの下に取り組んでいます。ここで

は私が「hiddenFileLoad」idを与えた.txtファイルの内容をロードするためには、私が使用してdivを隠さ

$(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 
}); 

jQueryの.load()

使用して、それを達成する方法です。

私はあなたのHTMLに全く変更を加えませんでした（隠しdivを除いて）、あなたのtxtファイルのコンテンツを使用しました。

私はあなたがファイルに保存する方法を知っていると仮定します... 保存ボタンを動作させませんでした。

Here is a live example私のサーバーに。