Home / Questions / 57899
Accepted
Máxima Alekz
Asked: 2020-03-25 22:31:34 +0800 CST 2020-03-25 22:31:34 +0800 CST

加载 JSON 文件并将内容存储在变量中

  • 772

我有以下代码：

<script type="text/javascript">
    $(document).ready(function(){
        $("form.loader").on('submit',function(e){
            e.preventDefault();
            $.ajax({
                url: "data.json",
                type: "POST",
                cache: false,
                success: function(data){
                    console.log(data);
                },
                error: function(data){
                    console.log(data);
                }
            });
        });
    });
</script>

<form class="loader" method="POST" enctype="multipart/form-data">
    <input type="file" name="data">
    <button type="submit">Cargar datos</button>
</form>

所以我想要的是能够从输入文件中加载 JSON 并将 JSON 的全部内容存储在一个变量中。对其应用修改并再次保存文件:)

但现在我只想打开文件来操作它。

回复@json

使用 load 非常适合显示文件，但是如果我想将内容存储在变量中，我应该怎么做？

对于一些评论...

好吧，很少使用 GET。我通常总是使用 POST。如果我必须使用 GET，我想知道是什么原因:)

jquery

5 Answers

  1. 好吧，如果您想要在文件中显示 txt 的内容，它div或多或少是这样的。

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

    您将div要显示的位置和按钮放置在执行操作的位置。

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

    我希望能有所帮助。

    • 5
  2. Best Answer

    根据文件在哪一侧，您可以通过以下两种方式之一进行：从客户端设备（在 A 中解释）或从服务器（在 B 中解释）读取文件。

    你的问题：

    如果我必须使用 GET，我想知道是什么原因:)

    我将在 (C) 中回答。

    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+
    • Safari 6.1+

    B. 如果文件在服务器端

    你可以用 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

    • 5

  3. 您可以使用以下方法解决它：

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

    • 2

  4. 上传文件后，您可以将文件保存在 SessionStorage 或 LocalStorage 中，两者都非常好，因为它允许您在客户端存储数据，最大约为 5mb。一个和另一个的区别是，如果关闭浏览器，Session 会被删除，而另一个则不会。

    调用如下

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

    您将“variableJson”传递给名称为“variable”的会话或局部变量。这是作为临时文件保存在pc上的。如果您需要对其进行救援，应按如下方式进行。

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

    如果您需要删除，只需

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

    我希望它对你有帮助。

    而且 post 总是更好，因为 get 显示了您通过 url 发送到服务器的参数。如果我需要攻击您的网站，它被认为是“易受攻击的”，因为这样我开始了解您的服务器是如何工作的，以及如何通过这个块删除它。

    祝你工作顺利:D

    • 2

  5. 假设文件在服务器上，我们将使用jquery的.load()加载它并将内容存储在textarea中，以便您可以编辑它，一旦放置，您想要对文件进行的注释或更改，捕获其内容并通过$.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);
?>
    • 2