Cargar archivo JSON y almacenar contenido en variable

publicado por: Anonymous

Tengo el siguiente codigo:

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

Entonces, lo que quiero es poder cargar el JSON desde un input file y almacenar todo el contenido del JSON en una variable. Para aplicarle modificaciones y nuevamente volver a guardar el archivo 🙂

Pero por ahora quisiera solo abrir el archivo para manipularlo.

En respuesta a @json

Usar load esta genial para mostrar un archivo como tal, pero si quisiera guardar los contenidos en una variable cómo debo hacerlo?

Y para algunos comentarios…

Bueno, poco uso GET. Por lo general siempre uso POST. Si debo usar GET, me gustaría saber cuál es el motivo 🙂


solución

Dependiendo del lado en que se encuentre el archivo, podrías proceder de dos maneras: leyendo el archivo desde el dispositivo del cliente (explicado en A), o desde el servidor (explicado en B).

Tu pregunta:

Si debo usar GET, me gustaría saber cuál es el motivo 🙂

la responderé en (C).

A. SI EL ARCHIVO ESTÁ DEL LADO DEL CLIENTE

Puedes hacerlo usando FileReader. El cliente debe seleccionar el archivo haciendo clic en el botón:

_x000D_

_x000D_

function leerArchivo(e) {_x000D_
  var archivo = e.target.files[0];_x000D_
  if (!archivo) {_x000D_
    return;_x000D_
  }_x000D_
  var lector = new FileReader();_x000D_
  lector.onload = function(e) {_x000D_
    var contenido = e.target.result;_x000D_
    mostrarContenido(contenido);_x000D_
  };_x000D_
  lector.readAsText(archivo);_x000D_
}_x000D_
_x000D_
function mostrarContenido(contenido) {_x000D_
  var elemento = document.getElementById('contenido-archivo');_x000D_
  elemento.innerHTML = contenido;_x000D_
}_x000D_
_x000D_
document.getElementById('file-input')_x000D_
  .addEventListener('change', leerArchivo, false);

_x000D_

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

_x000D_

_x000D_

_x000D_

Nota:

Este método es compatible con:

  • IE 10+
  • Firefox 3.6+
  • Chrome 13+
  • Safari 6.1+

B. SI EL ARCHIVO ESTÁ DEL LADO DEL SERVIDOR

Puedes hacerlo con jQuery. En el ejemplo se introduce la url del archivo en el input y al pulsar el botón se pide el archivo al servidor mediante el método get de Ajax. Si la respuesta es satisfactoria, se muestra el archivo en un div.

_x000D_

_x000D_

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>_x000D_
_x000D_
<script>_x000D_
$(function() _x000D_
{_x000D_
$("#button").click( function()_x000D_
{_x000D_
   alert('button clicked');_x000D_
//       var TXT_URL = 'https://www.mozilla.org/media/MPL/2.0/index.815ca599c9df.txt';_x000D_
   var TXT_URL = $("#input-url").val();_x000D_
_x000D_
    $.ajax_x000D_
    (_x000D_
    	{_x000D_
        	url : TXT_URL,_x000D_
			dataType: "text",_x000D_
			success : function (data) _x000D_
			{_x000D_
            	$(".text").html("<pre>"+data+"</pre>");_x000D_
			}_x000D_
		}_x000D_
	);_x000D_
   });_x000D_
});_x000D_
_x000D_
</script>_x000D_
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>_x000D_
_x000D_
<input type="button" id="button" value="Ver .txt"></input>_x000D_
<div class="text">_x000D_
  <hr />_x000D_
  <h2>Texto:</h2>_x000D_
</div>

_x000D_

_x000D_

_x000D_

C. ¿QUÉ MÉTODO USAR?

En el primer caso ninguno, ya que el servidor no interviene para nada. En el segundo caso el método GET.

The fundamental differences between “GET” and “POST”

The HTML specifications technically define the difference between “GET” and
“POST” so that former means that form data is to be encoded (by a
browser) into a URL while the latter means that the form data is to
appear within a message body. But the specifications also give the
usage recommendation that the “GET” method should be used when the
form processing is “idempotent”, and in those cases only. As a
simplification, we might say that “GET” is basically for just getting
(retrieving) data whereas “POST” may involve anything, like storing or
updating data, or ordering a product, or sending E-mail.

The HTML 2.0 specification says, in section Form Submission (and the
HTML 4.0 specification repeats this with minor stylistic changes):

If the processing of a form is idempotent (i.e. it has no lasting
observable effect on the state of the world), then the form method
should be GET. Many database searches have no visible side-effects and
make ideal applications of query forms.

If the service associated with the processing of a form has side
effects (for example, modification of a database or subscription to a
service), the method should be POST.


Las diferencias fundamentales entre “GET” y “POST”

Las especificaciones HTML definen técnicamente la diferencia entre
“GET” y “POST”, de modo que GET significa que los datos del formulario
deben ser codificados (por un navegador) en una URL mientras que POST
significa que los datos del formulario deben aparecer dentro del
cuerpo del mensaje. Pero las especificaciones también recomiendan que
el método “GET” debe ser usado cuando el procesamiento de formulario es “idempotent”, y sólo en esos casos. Como una simplificación,
podríamos decir que “GET” es usado básicamente para obtener
(recuperar) datos mientras que “POST” puede implicar cualquier cosa,
como almacenar o actualizar datos, ordenar un producto o enviar correo
electrónico.

La especificación HTML 2.0 dice, en la sección Formulario de
presentación (y la especificación HTML 4.0 lo repite con cambios
estilísticos menores):

Si el procesamiento de un formulario es idempotente (es decir, no tiene un efecto observable duradero…), entonces
el método de formulario debe ser GET. Muchas búsquedas de base de
datos no tienen efectos secundarios visibles y hacen aplicaciones
ideales de formularios de consulta.

Si el servicio asociado con el procesamiento de un formulario tiene efectos secundarios (por ejemplo, modificación de una base de datos o
suscripción a un servicio), el método debe ser POST.

Fuente: http://www.cs.tut.fi/~jkorpela/forms/methods.html

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *