AJAX с jQuery

Загрузка jQuery

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

<script 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, потому что она уже будет в кэше браузера.

Где мой сайт?

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

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

<script>
  $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>
  $(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, только очень краткое объяснение небольшого кода выше:

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

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