javascript - 如何从 JavaScript 中的纯文本读取/写入

Question

我对 JS 了解不多，我是这个世界的新人，我知道 HTML 和 CSS，但这次我被要求制作一个应用程序，我必须使用从纯文本接收数据到我的处方集JS。

这是我的纯文本 data.txt:

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

这是我的 Div:

<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">
				<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>
	
</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在我的服务器上。