Динамически обновляемые страницы, созданные Python

Question

Я изучал это в течение нескольких месяцев, но я не способен найти четкое направление.

Моя цель - иметь страницу, на которой есть форма и график. Форма может быть заполнена, а затем отправлена ​​на скрипт CGI Python (да, я перейду к WSGI или fast_cgi позже, я начинаю просто!) Я бы хотел, чтобы форма могла отправлять несколько раз, поэтому пользователь может обновить график, но я не хочу, чтобы страница перезагружалась каждый раз, когда это было. У меня есть форма и график, но они находятся на отдельных страницах и работают как обычный сценарий.

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

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

(я нашел подобные руководства делать это в PHP, я считаю, но по какой-то причине, они не служат своей цели.)

EDIT: График генерируется с использованием ФЛОТ (а JQuery), используя точки, созданные из ввода формы и обрабатываемые в сценарии Python. Сценарий Python печатает Javascript, который создает граф в конце. Все это можно сделать в Javascript, но я хочу, чтобы более тяжелый материал обрабатывался на стороне сервера, а значит, и на Python.

Спасибо!

Answer 1

Я предполагаю, что у вас есть две страницы на данный момент - страница, на которой отображается форма, и страница, которая получает запрос POST и отображает график.

Будет немного jQuery, вы можете делать именно то, что хотите.

Сначала добавьте на свою страницу формы пустой div с id="results". Затем на странице графика, на которой отображается график, помещается вывод, который вы хотите показать пользователю в div с тем же идентификатором.

Теперь приложите обработчик onclick к кнопке отправки (или к отдельным частям формы, если вы хотите, чтобы она была более динамичной). Это должно сериализовать форму, отправить ее на страницу построения страницы, чтобы выгрузить содержимое раздела id="results" и наполнить их в div id="results" на странице формы.

Это будет отображаться для пользователя в виде графика, отображаемого на странице, когда они нажимают кнопку «Отправить».

Вот набросок кода JQuery вам потребуется

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

Редактировать

Просто чтобы прояснить на вышеизложенное, если вы хотите форму перерисовывать график всякий раз, когда пользователь нажимает любую органы управления не только тогда, когда пользователь нажимает кнопку отправить, добавить еще несколько вещей, как этого

$("form input[type=text]").keypress(submit); 
$("form input[type=checkbox], form select").change(submit) 

Answer 2

Обновление img.src Атрибут в onsubmit() обработчик.

• img.src url указывает на ваш скрипт Python, который должен генерировать изображение в ответ.
• onsubmit() для вашей формы можно зарегистрировать и написать с помощью JQuery.

Answer 3

Если вы будете загружать HTML и Javascript, которые должны быть выполнены, и единственная причина, по которой вы не хотите загружать новую страницу, - это сохранить окружающие элементы, вы, вероятно, можете просто вставить форму в IFRAME , Когда форма POSTED, только содержимое IFRAME заменяется новым содержимым. Также не требуется AJAX. Вы можете обнаружить, что answers here дают вам достаточное руководство или Google для таких вещей, как «сообщение формы в iframe».

Answer 4

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

Общая картина выглядит, что:

1. Генерация XMLHttpRequest (в onsubmit формы или это «Отправить» кнопку OnClick обработчик), который идет в сценарий Python. Опционально отключите кнопку отправки.
2. Серверная сторона - генерировать график (предполагая, что исходный HTML + JS, как намекнул ваш комментарий к другому ответу)
3. Клиентская сторона, обработчик ответа XmlHttp. Замените необходимую часть своей страницы на HTML, полученный с помощью ответа. Получите responseText с запросом (он содержит все ваши скрипты на Python) и установите innerHtml элемента управления, который отображает ваш график.

Ключевые моменты:

• с использованием XMLHttpRequest (так что браузер не будет автоматически заменять вашу страницу с ответом).
• манипулирование страницей самостоятельно в обработчике ответа. innerHtml - это только один из вариантов.

Редактировать: Here - простой пример создания и использования XMLHttpRequest. JQuery делает его намного проще, ценность этого примера - узнать, как он работает «под капотом».