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 }};
</script>

Функции представления 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.