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

Question

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

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

Мне бы хотелось избегать ВСЕХ фреймворков, кроме JQuery (как мне нравится, не люблю иметь дело с причудами разных браузеров и т. Д.).

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

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

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

Спасибо!

Answer 1

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

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

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

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

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

Вот эскиз кода 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

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

Answer 3

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

Общая схема выглядит так:

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

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

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

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

Answer 4

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

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