Llevo varios meses investigando esto de vez en cuando, pero soy incapaz de encontrar una dirección clara.

Mi objetivo es tener una página que tenga un formulario y un gráfico. El formulario se puede completar y luego enviar al script Python de CGI (sí, me moveré a WSGI o fast_cgi más tarde, ¡estoy comenzando de forma simple!) Me gustaría que el formulario se pueda enviar varias veces, por lo que el usuario puede actualizar el gráfico, pero no quiero que la página se vuelva a cargar cada vez que lo haga. Ahora tengo un formulario y un gráfico, pero están en páginas separadas y funcionan como un script convencional.

Me gustaría evitar TODOS los marcos excepto JQuery (como me encanta, no me gusta lidiar con las peculiaridades de los diferentes navegadores, etc.).

Un empujón en la (s) dirección (es) correcta (s) es todo lo que pido aquí, o sea tan específico como quiera.

(Creo que encontré guías similares para hacer esto en PHP, pero por alguna razón, no sirvieron para mi propósito).

EDITAR : el gráfico se genera usando Flot (un complemento de JQuery) usando puntos generados a partir de la entrada del formulario y procesados en el script de Python. El script Python imprime el Javascript que produce el gráfico al final. Todo podría hacerse en Javascript, pero quiero que las cosas más pesadas se manejen en el lado del servidor, de ahí el Python.

¡Gracias!

2
Isaac 6 dic. 2009 a las 18:59

4 respuestas

La mejor respuesta

Supongo que tiene dos páginas en este momento: una página que muestra el formulario y una página que recibe la solicitud POST y muestra el gráfico.

Con un poco de jQuery podrás hacer exactamente lo que quieras.

Primero agregue a su página de formulario un div vacío con id="results". A continuación, en la página de trazado de gráficos, coloque la salida que desea mostrar al usuario en un div con la misma identificación.

Ahora adjunte un controlador onclick al botón de envío (o a las partes individuales del formulario si desea que sea más dinámico). Esto debería serializar el formulario, enviarlo a la página de trazado, tomar el contenido del div. id="results" e introducirlo en el div id="results" en la página del formulario.

Esto aparecerá para el usuario como el gráfico que aparece en la página cada vez que haga clic en enviar.

Aquí hay un boceto del código jQuery que necesitará

$(function(){
    // Submit form
    // Get the returned html, and get the contents of #results and
    // put it into this page into #results
    var submit = function() {
        $.ajax({
            type: "POST",
            data: $("form").serialize(),
            success: function(data, textStatus) {
                $("#results").replaceWith($("#results", $(data)));
            }
        });
    };
    $("form input[type=submit]").click(submit);
    // I think you'll need this as well to make sure the form doesn't submit via the browser
    $("form").submit(function () { return false; });
});

Editar

Solo para aclarar lo anterior, si desea que el formulario vuelva a dibujar el gráfico cada vez que el usuario haga clic en cualquiera de los controles, no solo cuando haga clic en enviar, agregue algunas cosas más como esta

$("form input[type=text]").keypress(submit);
$("form input[type=checkbox], form select").change(submit)
4
Nick Craig-Wood 6 dic. 2009 a las 17:35

Actualice el atributo img.src en el controlador onsubmit().

  • La URL img.src apunta a su script de Python que debería generar una imagen en respuesta.
  • onsubmit() para su formulario podría registrarse y escribirse usando JQuery.
0
jfs 6 dic. 2009 a las 16:17

Si va a cargar HTML y Javascript que deben ejecutarse, y su única razón para no querer cargar una nueva página es preservar los elementos circundantes, probablemente podría pegar el formulario en un IFRAME. Cuando se envía el formulario, solo los contenidos del IFRAME se reemplazan con los nuevos contenidos. No se requiere AJAX tampoco. Puede encontrar que las respuestas aquí le brindan suficiente dirección o Google para cosas como "publicación de formulario en iframe".

2
Community 23 may. 2017 a las 12:11

Me gustaría que el formulario se pueda enviar varias veces, para que el usuario pueda actualizar el gráfico, pero no quiero que la página se vuelva a cargar cada vez que lo haga.

El patrón general es así:

  1. Genere una XMLHttpRequest (en el formulario de envío o en el botón 'enviar' en el controlador de clics) que va a su secuencia de comandos Python. Opcionalmente, deshabilite el botón Enviar.
  2. Lado del servidor: genere el gráfico (suponiendo HTML + JS sin procesar, como lo indica su comentario a otra respuesta)
  3. Lado del cliente, controlador de respuesta XmlHttp. Reemplace la parte necesaria de su página con el HTML obtenido a través de la respuesta. Obtenga responseText de la solicitud (contiene lo que haya producido su script Python) y configure innerHtml de un control que muestre su gráfico.

Los puntos clave son:

  • usando XMLHttpRequest (para que el navegador no reemplace automáticamente su página con la respuesta).
  • manipulando la página usted mismo en el controlador de respuestas. innerHtml es solo una de las opciones aquí.

Editar: Aquí es un ejemplo simple de crear y usar un XMLHttpRequest. JQuery lo hace mucho más simple, el valor de este ejemplo es conocer cómo funciona 'bajo el capó'.

1
Rafał Dowgird 6 dic. 2009 a las 17:20