AJAX с jQuery

jQuery — это небольшая JavaScript-библиотека, обычно используемая для упрощения работы с DOM и JavaScript в целом. Она является идеальным инструментом для создания более динамичных веб-приложений, обмениваясь JSON между сервером и клиентом.

Сам JSON — это очень лёгкий формат передачи данных, очень похожий на то, как выглядят базовые типы данных Python (числа, строки, словари и списки), который широко поддерживается и очень легко парсится. Он стал популярным несколько лет назад и быстро заменил XML в качестве формата передачи данных в веб-приложениях.

Загрузка jQuery

Для использования jQuery, вам необходимо сначала загрузить его и поместить его в папку static вашего приложения, а затем убедиться, что он загружен. В идеале у вас есть шаблон макета, используемый для всех страниц, где вам просто нужно добавить инструкцию скрипта в конец вашего <body> для загрузки jQuery:

<script type=text/javascript src="{{
  url_for('static', filename='jquery.js') }}"></script>

Другой метод — использование API библиотек AJAX от Google AJAX Libraries API для загрузки jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{
  url_for('static', filename='jquery.js') }}">\x3C/script>')</script>

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

Где находится мой сайт?

Знаете ли вы, где находится ваше приложение? Если вы разрабатываете, ответ довольно прост: это localhost на каком-то порту и непосредственно в корневом каталоге этого сервера. Но что, если вы позже решите переместить своё приложение в другое место? Например, в http://example.com/myapp? На стороне сервера это никогда не было проблемой, потому что мы использовали удобную функцию url_for(), которая могла ответить на этот вопрос за нас, но если мы используем jQuery, мы не должны жёстко кодировать путь к приложению, а сделать его динамическим. Как это можно сделать?

Простым методом было бы добавление тега скрипта на нашу страницу, который задаёт глобальную переменную для префикса к корню приложения. Что-то вроде этого:

<script type=text/javascript>
  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>

|safe необходим в Flask до версии 0.10, чтобы Jinja не экранировал закодированную в JSON строку с HTML-правилами. Обычно это было бы необходимо, но мы находимся внутри script блока, где применяются другие правила.

Информация для специалистов

В HTML тег script объявлен CDATA, что означает, что сущности не будут обработаны. Всё до </script> обрабатывается как скрипт. Это также означает, что между тегами скрипта никогда не должно быть </. |tojson достаточно любезен, чтобы сделать всё правильно и экранировать косые черты для вас ({{ "</script>"|tojson|safe }} отображается как "<\/script>").

В Flask 0.10 это доходит ещё дальше и экранирует все HTML-теги с помощью универсальных экранирований. Это позволяет Flask автоматически маркировать результат как безопасный для HTML.

Функции представления JSON

Теперь давайте создадим функцию серверной части, которая принимает два URL-аргумента чисел, которые должны быть сложены вместе, а затем отправлены обратно в приложение в объекте JSON. Это действительно глупый пример, и это то, что вы обычно делаете только на стороне клиента, но это простой пример, который показывает, как вы можете использовать jQuery и Flask:

from flask import Flask, jsonify, render_template, request
app = Flask(__name__)

@app.route('/_add_numbers')
def add_numbers():
    a = request.args.get('a', 0, type=int)
    b = request.args.get('b', 0, type=int)
    return jsonify(result=a + b)

@app.route('/')
def index():
    return render_template('index.html')

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

Обратите внимание, что мы используем метод get(), который никогда не потерпит неудачу. Если ключ отсутствует, возвращается значение по умолчанию (здесь 0). Кроме того, он может преобразовывать значения в определённый тип (например, в нашем случае int). Это особенно удобно для кода, который запускается скриптом (API, JavaScript и т. д.), так как вам не нужно специальное сообщение об ошибке в этом случае.

HTML

Ваш шаблон index.html должен либо расширить шаблон layout.html с загруженным jQuery и установленной переменной $SCRIPT_ROOT, или сделать это в верхней части. Вот необходимый код HTML для нашего небольшого приложения (index.html). Обратите внимание, что мы также вставляем скрипт непосредственно в HTML. Обычно лучше иметь его в отдельном файле скрипта:

<script type=text/javascript>
  $(function() {
    $('a#calculate').bind('click', function() {
      $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
        a: $('input[name="a"]').val(),
        b: $('input[name="b"]').val()
      }, function(data) {
        $("#result").text(data.result);
      });
      return false;
    });
  });
</script>
<h1>jQuery Example</h1>
<p><input type=text size=5 name=a> +
   <input type=text size=5 name=b> =
   <span id=result>?</span>
<p><a href=# id=calculate>calculate server side</a>

Я не буду подробно разбирать, как работает jQuery, а просто очень кратко объясню небольшой фрагмент кода выше:

$(function() { ... }) определяет код, который должен выполняться после того, как браузер загрузит основные части страницы.
$('selector') выбирает элемент и позволяет вам оперировать им.
element.bind('event', func) определяет функцию, которая должна выполняться при нажатии пользователем на элемент. Если эта функция возвращает false, стандартное поведение не будет выполнено (в этом случае, переход на # URL).
$.getJSON(url, data, func) отправляет запрос GET на url и отправит содержимое объекта data в качестве параметров запроса. После получения данных он вызовет указанную функцию с возвращаемым значением в качестве аргумента. Обратите внимание, что мы можем использовать здесь переменную $SCRIPT_ROOT, которую мы установили ранее.

Посмотрите пример исходного кода example source для полного приложения, демонстрирующего код на этой странице, а также то же самое с использованием XMLHttpRequest и fetch.