Как получить Python и JavaScript для общения с помощью JSON

Содержание

1 Предпосылки
2 Настройка сервера
3 Настройка Python
4 Шаблоны
5 Код

Когда-нибудь задумывались, как передавать данные между двумя языками программирования? Вы когда-нибудь пытались отправить объект или несколько фрагментов данных?

Сегодня я покажу вам, как использовать JSON для отправки данных из JavaScript в Python. Я расскажу, как настроить веб-сервер, а также весь необходимый вам код.

Предпосылки

Вам нужно несколько вещей, чтобы начать работу с этим проектом. Я буду работать на Mac, на котором уже установлен Python. Вы должны уметь достаточно хорошо следовать Linux. Если вы используете Windows, вам нужно скачать и установить Python, и, возможно, освежить свои навыки командной строки

Вам понадобится pip, менеджер пакетов для Python. Это установлено по умолчанию с версиями Python больше, чем 2.7.9.

Настройка сервера

Вам нужен сервер для обслуживать Python для веб-страницы. Есть много вариантов для этого. Если у вас уже есть настройка сервера, вы можете пропустить этот шаг.

Есть много вариантов, которые вы можете использовать здесь. Tornado — хороший выбор, как и Twisted (я уже писал о Twisted для сетевой камеры DIY). Я буду использовать Flask для этого проекта.

Установите Flask используя pip (через командную строку):

pip install Flask

Это оно! Существует несколько вариантов настройки, но при условии правильной установки вы можете приступить к работе.

Вы можете рассмотреть возможность использования виртуальной среды Python

Однако это совершенно необязательно.

Настройка Python

Создайте новый файл в своем любимом текстовом редакторе или интегрированной среде разработки (IDE). Я использую Sublime Text 3 и PyCharm, но использую все, что вам удобно.

Теперь выполните начальную настройку Flask:

from flask import Flask
app = Flask(__name__)

Это импортирует необходимые модули и настраивает ваше приложение. Теперь создайте дорожка:

@app.route("/output")
def output():
return "Hello World!"

Это настраивает дорожка, которая похожа на страницу сайта. Это иногда можно назвать конечная точка или маршрут.

def output () линия определяет функция или же метод называется выход, который будет запускаться всякий раз, когда вызывается эта конечная точка. Эти методы не должны использовать то же имя, что и конечная точка — назовите его любым подходящим именем. Внутри этот метод прост Привет, мир! строка. Наконец, настройте ваш скрипт так, чтобы он действительно запускался при запросе:

if __name__ == "__main__":
app.run()

Сохраните этот скрипт как json_io.py в подходящем месте. Вернитесь к своему терминалу и перейдите в папку вашего проекта. Запустите скрипт:

python json_io.py

Слово питон используется, чтобы сообщить компьютеру, что следующий файл должен быть запущен как скрипт Python. Имя файла после — это имя файла, который вы хотите запустить как Python. Если все работает правильно, вы должны увидеть сообщение о состоянии в Терминале:

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Это показывает вам IP-адрес, на котором работает ваш сервер, а также порт. Это будет 127.0.0.1 а также 5000. Вы можете нажать CTRL > С чтобы остановить это, но пока не делайте этого.

Введите адрес в браузере, и вы должны увидеть Привет, мир! появляются на экране. Теперь вы успешно настроили сервер Python и написали свой первый скрипт! Вам нужно будет перезапустить сервер (остановите скрипт, затем запустите его снова), если вы внесете какие-либо изменения.

Если вы хотите просматривать свои скрипты на другом компьютере в той же сети, измените app.run () чтобы:

app.run("0.0.0.0", "5010")

Эта часть состоит из двух частей. Первый указывает Flask обслуживать файлы на локальном IP-адресе (убедитесь, что вы сохранили это как 0.0.0.0, хотя это не ваш IP-адрес). Вторая часть определяет порт. Вы можете изменить порт, если хотите. Запустите скрипт снова (не забудьте сохранить и перезапустить).

Теперь вы сможете получить доступ к своим сценариям с другого компьютера в той же сети. Убедитесь, что вы используете свой IP-адрес (запустите Ifconfig в командной строке) и порт, который вы ввели ранее. Возможно, вам придется настроить брандмауэр, если вы его используете.

Консоль покажет вам HTTP-ответ и IP-адрес любого устройства, которое подключается к вашему серверу:

Обратите внимание, как конечная точка / Д.Ф. вернул ошибку 404? Конечная точка не настроена! Если вы хотите получить доступ к этому через Интернет, посмотрите на переадресацию портов

Шаблоны

Теперь, когда ваш сервер полностью настроен, пришло время написать несколько шаблонов. Вы будете использовать JSON для отправки данных между Python и Javascript, а шаблоны облегчают это. Мы написали о том, что такое JSON

в прошлом, так что читайте, если вы не уверены.

Вам нужно будет использовать язык шаблонов. Jinja2 поставляется с Flask, поэтому дополнительная настройка не требуется.

Язык шаблонов работает совместно с веб-сервером. Он принимает выходные данные ваших скриптов Python (внутренний код) и позволяет легко выводить их пользователю, используя HTML (внешний интерфейс). Важно отметить, что шаблоны должны не быть использованы для логики! Сохраняйте логику в Python и используйте шаблоны только для отображения данных. Будет очень грязно, если вы начнете пытаться усложнить шаблон.

Создайте папку в каталоге вашего проекта с именем шаблоны. Flask распознает файлы в этой папке как файлы шаблонов. Не размещайте здесь скрипты Python, здесь вы можете разместить свои HTML-файлы.

Создайте файл с именем index.html. Внутри него поместите следующий код:

{{ name }}

Это способ доступа к части данных под названием название, который будет найден в ваших скриптах. Вернуться к вашему json_io.py. сценарий, и измените выход функция. Вместо возвращения Привет, мир, введите этот код:

return render_template("index.html", name="Joe")

Это загрузит index.html файл, который вы создали ранее, и замените {{ название }} тег шаблона для строки Джо. Вы можете использовать этот метод для загрузки любой страницы в папке вашего шаблона и передачи им любого количества данных.

Код

Теперь, когда вы знаете, как работают шаблоны, вам нужен полный HTML-код. Вставьте это в свой index.html файл:


// setup some JSON to use
var cars = [
{ "make":"Porsche", "model":"911S" },
{ "make":"Mercedes-Benz", "model":"220SE" },
{ "make":"Jaguar","model": "Mark VII" }
];
window.onload = function() {
// setup the button click
document.getElementById("theButton").onclick = function() {
doWork()
};
}
function doWork() {
// ajax the JSON to the server
$.post("receiver", cars, function(){
});
// stop link reloading the page
event.preventDefault();
}
This will send data using AJAX to Python:


Click Me

Обратите внимание, что это не включает CSS или какие-либо HTML-заголовки. Они необходимы для веб-страниц (этот пример будет работать без них), поэтому, если хотите, изучите их в W3Schools.

В этом файле ничего особенного не происходит. Список раллийных автомобилей JSON настроен. Там есть немного текста и кнопка. Когда кнопка нажата, JQuery используется для СООБЩЕНИЕ список автомобилей на сервер. Это пойдет на получатель конечная точка, которую вы создадите дальше. Обязательно прочтите наше руководство по jQuery, если вы хотите узнать больше о том, как это работает в этом контексте.

Вот код, который вам нужен для json_io.py:

#!flask/bin/python
import sys
from flask import Flask, render_template, request, redirect, Response
import random, json
app = Flask(__name__)
@app.route('/')
def output():
# serve index template
return render_template('index.html', name='Joe')
@app.route('/receiver', methods = ['POST'])
def worker():
# read json + reply
data = request.get_json()
result = ''
for item in data:
# loop over every row
result += str(item['make']) + '\n'
return result
if __name__ == '__main__':
# run!
app.run()

Этот код определяет две конечные точки. По умолчанию (/) обслуживает предыдущую HTML-страницу. Когда кнопка нажата, СООБЩЕНИЕ запрос сделан /получатель конечная точка. Вторая часть определения маршрута (методы = [‘POST’]) определяет, как эта страница может быть доступна. Как СООБЩЕНИЕ это единственный указанный путь, этот маршрут будет отклонять любые другие запросы http (такие как ПОЛУЧИТЬ).

это /получатель Конечная точка просто перебирает каждую строку JSON и добавляет строку make машины к строке, которая затем возвращается после цикла. JSON хранится в данные переменная, и как request.get_json () Python знает, что это объект JSON. вещь переменная внутри для цикла можно представить как ряд данных. Доступ к различным элементам каждой строки можно получить, используя их имя в квадратных скобках (пункт [ «сделать»]).

Откройте инструменты разработчика вашего браузера (CMD > ALT > я в Mac OS / Chrome) и перейдите к сеть Вкладка. Нажмите кнопку, и вы должны увидеть ответ сервера:

Попробуйте изменить исходный JSON и посмотрите, что произойдет. Давайте изменим Python, чтобы сделать что-то другое, в зависимости от JSON. Вот новый код, который вам нужен для для цикла:

	for item in data:
# loop over every row
make = str(item['make'])
if(make == 'Porsche'):
result += make + ' -- That is a good manufacturer\n'
else:
result += make + ' -- That is only an average manufacturer\n'

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