Как я могу читать / записывать из простого текста в JavaScript

ProgramBox

Как я могу читать / записывать из простого текста в JavaScript

Post author:admin
Запись опубликована:17 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css #twitter-bootstrap-3

#javascript #jquery #HTML #css #twitter-bootstrap-3

Вопрос:

Я мало что знаю о 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>

Ответ №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:nn" 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) и использовал содержимое вашего текстового файла.

Я предполагаю, что вы знаете, как сохранить в файл… Я не заставил кнопку сохранения работать.

Вот живой пример на моем сервере.