Загрузите файл JSON и сохраните содержимое в переменной

Что ж, если вы хотите показать содержимое txt в файле, это будет divпримерно так.

$(document).ready(function(){
  $("button").click(function(){
    $("#texto").load("archivo.txt");
  });
});

вы помещаете divтуда, где вы хотите, чтобы оно отображалось, и кнопку для выполнения действия.

<button>Cargar Contenido</button>
<div id="texto"></div>

Я надеюсь быть полезным.

В зависимости от того, на какой стороне находится файл, вы можете действовать одним из двух способов: прочитать файл с клиентского устройства (объяснено в A) или с сервера (объяснено в B).

Ваш вопрос:

Если я должен использовать GET, я хотел бы знать, в чем причина :)

Я отвечу на него в (С).

A. ЕСЛИ ФАЙЛ НАХОДИТСЯ НА КЛИЕНТСКОЙ СТОРОНЕ

Вы можете сделать это с помощью FileReader . Клиент должен выбрать файл, нажав на кнопку:

function leerArchivo(e) {
  var archivo = e.target.files[0];
  if (!archivo) {
    return;
  }
  var lector = new FileReader();
  lector.onload = function(e) {
    var contenido = e.target.result;
    mostrarContenido(contenido);
  };
  lector.readAsText(archivo);
}

function mostrarContenido(contenido) {
  var elemento = document.getElementById('contenido-archivo');
  elemento.innerHTML = contenido;
}

document.getElementById('file-input')
  .addEventListener('change', leerArchivo, false);

<input type="file" id="file-input" />
<h3>Contenido del archivo:</h3>
<pre id="contenido-archivo"></pre>

Примечание:

Этот метод поддерживается:

• IE 10+
• Фаерфокс 3.6+
• Хром 13+
• Сафари 6.1+

Вы можете сделать это с помощью jQuery. В примере на вход вводится url файла и при нажатии кнопки файл запрашивается с сервера через метод Ajax get . Если ответ успешен, файл отображается в div.

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

<script>
$(function() 
{
$("#button").click( function()
{
   alert('button clicked');
//       var TXT_URL = 'https://www.mozilla.org/media/MPL/2.0/index.815ca599c9df.txt';
   var TXT_URL = $("#input-url").val();

    $.ajax
    (
    	{
        	url : TXT_URL,
			dataType: "text",
			success : function (data) 
			{
            	$(".text").html("<pre>"+data+"</pre>");
			}
		}
	);
   });
});

</script>
Ingrese una url válida:<input type="text" id="input-url" size="50" value="https://www.mozilla.org/media/MPL/2.0/index.815ca599c9df.txt"></input>

<input type="button" id="button" value="Ver .txt"></input>
<div class="text">
  <hr />
  <h2>Texto:</h2>
</div>

C. КАКОЙ МЕТОД ИСПОЛЬЗОВАТЬ?

В первом случае никакие, так как сервер вообще не вмешивается. Во втором случае метод GET.

Принципиальные различия между «GET» и «POST»

Спецификации HTML технически определяют разницу между «GET» и «POST», так что первое означает, что данные формы должны быть закодированы (браузером) в URL-адрес, а второе означает, что данные формы должны отображаться в теле сообщения. . Но спецификации также дают рекомендацию по использованию, что метод «GET» следует использовать, когда обработка формы является «идемпотентной», и только в этих случаях. В качестве упрощения мы могли бы сказать, что «GET» в основном предназначен только для получения (извлечения) данных, тогда как «POST» может включать в себя что угодно, например, сохранение или обновление данных, заказ продукта или отправку электронной почты.

Спецификация HTML 2.0 говорит в разделе «Отправка формы» (и спецификация HTML 4.0 повторяет это с небольшими стилистическими изменениями):

Если обработка формы является идемпотентной (т. е. она не оказывает долговременного наблюдаемого влияния на состояние мира), то метод формы должен быть GET. Многие поиски в базе данных не имеют видимых побочных эффектов и идеально подходят для форм запросов.

Если служба, связанная с обработкой формы, имеет побочные эффекты (например, изменение базы данных или подписка на службу), метод должен быть POST.

Принципиальные различия между «GET» и «POST»

Спецификации HTML технически определяют разницу между «GET» и «POST», так что GET означает, что данные формы должны быть закодированы (браузером) в URL-адресе, а POST означает, что данные формы должны отображаться в теле сообщения. Но в спецификациях также рекомендуется использовать метод "GET" при "идемпотентной" обработке формы, и только тогда . Для упрощения мы могли бы сказать, что «GET» в основном используется для получения (извлечения) данных, в то время как «POST» может подразумевать что угодно, например, сохранение или обновление данных, заказ продукта или отправку электронной почты.

Спецификация HTML 2.0 говорит в разделе «Форма отправки» (и спецификация HTML 4.0 повторяет это с небольшими стилистическими изменениями):

Если обработка формы является идемпотентной (т. е. не имеет длительного наблюдаемого эффекта...), то метод формы должен быть GET. Многие операции поиска в базе данных не имеют видимых побочных эффектов и являются идеальными приложениями для форм запросов.

Если служба, связанная с обработкой формы, имеет побочные эффекты (например, изменение базы данных или подписка на службу), метод должен быть POST.

Источник: http://www.cs.tut.fi/~jkorpela/forms/methods.html .

Вы можете решить это, используя:

• API FileReaderЧто позволяет динамически читать файл, введенный пользователем .
• Метод, JSON.parseкоторый позволяет нам преобразовать строку JSONв объект.

Пример:

var input = document.getElementById('file'),
  code = document.getElementById('code');

input.addEventListener('change', function() {
  var file = input.files[0];
  
  var reader = new FileReader();
  reader.onload = function(e) {
    var json;
    // Aquí mostramos el texto que contiene el archivo
    code.value = e.target.result;

    // Aquí guardamos en una variable el resultado de parsear el JSON
    json = JSON.parse(e.target.result);
  };
  reader.readAsText(file);
});

<input id="file" type="file" accept="txt/json" /><br/>
<textarea id="code" name="code" rows="5" cols="50"></textarea>

После того, как вы загрузите файл, вы можете сохранить его в SessionStorage или LocalStorage, оба очень хороши, поскольку они позволяют хранить данные на стороне клиента с максимальным объемом около 5 МБ. Разница между одним и другим в том, что Session удаляется при закрытии браузера, а другой нет.

Это вызывается следующим образом

sessionStorage.setItem('variable', variableJson);
localStorage.setItem('variable', variableJson);

Вы передаете "variableJson" в сеанс или локальную переменную с именем "переменная". Это сохраняется на компьютере как временный файл. Если вам нужно его спасти, это следует сделать следующим образом.

sessionStorage.getItem('variable');
localStorage.getItem('variable');

и если вам нужно удалить, просто

sessionStorage.removeItem('variable');
localStorage.removeItem('variable');

Я надеюсь, что это поможет вам.

И post всегда лучше, так как get показывает параметры, которые вы отправляете на свой сервер через URL-адрес. И он считается "уязвимым", если мне нужно будет атаковать ваш сайт, так как так я начинаю понимать, как работает ваш сервер и как я могу скинуть его через этот блок.

Удачи тебе в том, над чем ты работаешь :D

Предполагая, что файл находится на сервере, мы загрузим его с помощью jquery .load () и сохраним содержимое в текстовом поле , чтобы вы могли редактировать его и после размещения, комментарии или изменения, которые вы хотите внести в файл, вы захватываете его содержимое и отправляете $.post в php-скрипт, чтобы сохранить изменения.

    $(document).ready(function(){
        //Cargamos el contenido  para el textarea
        $("id_load").click(function(){
            $("#id_textarea").load("demo_test.txt");
        });
        //Enviamos los datos por $.pos para el servidor para guardar los cambios 
        $("id_save").click(function(){
           //Capturamos los cambios hecho al contenido del fichero.
           var text_area = $("#id_textarea").val()
          $.post("script.php",{text_area:text_area},'json');
       });
    });

Форма:

 <form class="loader" method="POST" enctype="multipart/form-data">
    <button type="button" id="id_load">Cargar datos</button>
    <textarea name="con_txt" id="id_textarea" rows="40"></textarea>
    <button type="button" id="id_save">Guardar datos</button>
</form>

в script.php, чтобы добавить содержимое в конец файла:

<?php 
//Capturamos el datos que viene del formulario con $_POST de php.
$contenido = $_POST['text_area'];
$f = fopen("demo_test.txt", "W");
fwrite($f,$contenido);
fclose($f);
?>