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 на нашу страницу, который устанавливает глобальную переменную для префикса к корню приложения. Что-то вроде этого:

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

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

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

В HTML тег script объявлен CDATA, что означает, что сущности не будут парситься. Всё до </script> обрабатывается как скрипт. Это также означает, что между тегами 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, которую мы установили ранее.

Если вы не понимаете всю картину, загрузите исходный код этого примера с GitHub.

© 2007–2020 Pallets
Licensed under the BSD 3-clause License.
https://flask.palletsprojects.com/en/0.12.x/patterns/jquery/