10

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


10
  • No es posible enviar archivos mediante ajax, según tengo entendido. :) donde deseas mostrar el contenido del archivo cargado?
    – DarkFenix
    el 25 mar. 2017 a las 7:06
  • no está enviando un archivo Está intentando leer text.txt. Para eso, para empezar, debiera ser una petición GET
    – ffflabs
    el 25 mar. 2017 a las 13:48
  • GET?, no entiendo. Bueno yo siempre he usado POST. el 25 mar. 2017 a las 15:09
  • @amenadiel pregunta editada. el 25 mar. 2017 a las 15:15
  • @MáximaAlekz un llamado GET es idempotente. No cambia su respuesta así lo llames una y otra vez. Un llamado POST está pensado para crear cosas y puede retornar algo distinto cada vez. Dependiendo de tu webserver, un POST hacia un archivo estático puede devolverte cualquier cosa: a veces el contenido del estáticos, otras veces method not accepted. De todos modos no creo que sea ese el problema. ¿Actualmente, alguno de los dos console.log está tirando la respuesta a la consola?
    – ffflabs
    el 25 mar. 2017 a las 16:42

5 respuestas 5

5

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:

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>

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.

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

1
  • +1 Por excelente explicacion, y aclaracion de ciertos puntos inquietantes el 31 mar. 2017 a las 0:05
5

bueno si lo que quieres es mostrar el contenido de un txt en un div seria mas o menos así.

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

pones el div donde quieres que se muestre y el boton para ejecutar la acción.

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

espero sea de ayuda.

4
  • Buena respuesta. el 25 mar. 2017 a las 15:09
  • Pregunta editada. el 25 mar. 2017 a las 15:15
  • @MáximaAlekz si quieres guardar el contenido del txt en una variable, tras el load puedes hacer var contenido = document.getElementById("texto").innerHTML;
    – lois6b
    el 29 mar. 2017 a las 10:54
  • Pero si quiero que el usuario pueda seleccionar un json de su computadora, como lo puedo hacer entonces? el 29 mar. 2017 a las 19:04
2
+25

Podrías resolverlo usando:

  • La API FileReader la cual permite leer dinámicamente un archivo ingresado por el usuario.
  • El metodo JSON.parse el cual nos permite tranformar una cadena JSON a un objeto.

Ejemplo:

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>

0
2

Una vez que cargues el archivo, puedes guardar el archivo en una SessionStorage o una LocalStoragge, ambos son muy buenos, ya que te deja almacenar datos por el lado del cliente con un maximo de 5mb aprox. La diferencia entre uno y otro, es que Session se elimina si cierras el navegador, el otro no.

Este se invoca de la siguiente manera

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

Le pasas la "variableJson a la variable de la session o local con el nombre "variable". Esta queda guardada en el pc como archivo temporal. Si necesitas rescatarla, se debe hacer de la siguiente manera.

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

y si necesitas eliminar, basta con

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

Espero que te ayude.

Y siempre mejor es post, ya que get, delata los parámetros que le envías a tu servidor por la url. Y se considera como "vulnerable" si necesitase atacar a tu sitio, ya que de esa forma empiezo a entender como funciona tu servidor y como lo puedo botar a través de este bloque.

Exito en lo que estes trabajando :D

2
  • Wow, una respuesta inesperada. Pero muy util, muchas gracias amigo :) el 30 mar. 2017 a las 23:11
  • 1
    Si, esto ayuda, mucho a bajar el consumo de datos por red y ademas de consumo de base de datos :D Exito en tu trabajo :D el 31 mar. 2017 a las 16:46
2

Partiendo que el archivo esta en el servidor, lo cargaríamos con .load() de jquery y almacenáramos el contenido en un textarea para que lo puedas editar y una vez colocado, los comentarios o cambios que quieras hacerle al archivo, capturas su contenido y lo envias por $.post a un script de php para guardar los cambios.

    $(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');
       });
    });

Formulario:

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

en el script.php para añadir el contenido al final del fichero:

<?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);
?>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.