Как заставить Python и JavaScript общаться с помощью JSON

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

Сегодня я покажу вам как использовать 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 Setup

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

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

  из Flask import Flask 
app = Flask (__ name__)

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

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

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

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

  if __name__ == "  __main __ ": 
app.run ()

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

  python json_io.py  

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

  * Работает на http://127.0.0.1:5000/(для выхода нажмите CTRL + C)   

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

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

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

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

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

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

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

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

Шаблоны

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

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

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

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

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

  {{name}}  

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

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

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

Код

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

  

//настраиваем JSON для использования
var cars = [
{"make": "Porsche", "model": "911S"},
{"make": "Mercedes-Benz", "model": "220SE" },
{"make": "Jaguar", "model": "Mark VII"}
];
window.onload = function () {
//настраиваем кнопку click
document.getElementById ("theButton"). onclick = function () {
doWork ()
};
}
function doWork () {
//отправка JSON на сервер
$. post ("Receiver", cars, function () {
});
//останавливаем ссылку, перезагружающую страницу
event.preventDefault ();
}

Это отправит данные с использованием AJAX в Python:


Click Me

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

В этом файле не так много всего происходит. Настроен список раллийных автомобилей в формате JSON. Есть немного текста и кнопка. При нажатии кнопки jQuery используется для POST списка автомобилей на сервер. Это перейдет к конечной точке получателя , которую вы создадите следующей. Обязательно прочтите наше руководство по 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 ():
# обслужить шаблон индекса
return render_template ('index.html', name = 'Joe')
@ app.route ('/receiver', methods = ['POST'])
def worker ():
# чтение json + ответ
data = request.get_json ( )
result = ''
для элемента в данных:
# цикл по каждой строке
result + = str (item ['make']) + '
'
вернуть результат
if __name__ ==' __main __ ':
# run!
app.run ()

Этот код определяет две конечные точки. По умолчанию (/) используется предыдущая html-страница. При нажатии кнопки к конечной точке /получатель отправляется запрос POST . Вторая часть определения маршрута ( methods = [‘POST’] ) определяет, как можно получить доступ к этой странице. Поскольку POST является единственным указанным способом, этот маршрут будет отклонять любые другие HTTP-запросы (например, GET ).

Эта конечная точка /receiver просто перебирает каждую строку JSON и добавляет марку автомобиля к строке, которая затем возвращается после цикла. JSON хранится в переменной data , и поскольку использовался request.get_json () , Python знает, что это объект JSON. Переменную item внутри цикла for можно рассматривать как строку данных.. Доступ к различным элементам каждой строки можно получить, указав их имена в квадратных скобках ( item [‘make’] ).

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

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

  для элемента в данных: 
# цикл по каждой строке
make = str (item ['make'])
if (make == 'Porsche'):
result + = make + '- Это хороший производитель
'
else:
result + = make +' - Это только средний производитель
'

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

Теперь у вас должно быть твердое понимание того, как настроить сервер Python и как вы можете отвечать на запросы JSON.

Вам нравится писать код на JavaScript? Попробуйте создать сценарий голосовой анимации робота! Вы также можете улучшить свои навыки разработчика, освоив стрелочные функции JavaScript и методы массивов, а также изучив другие языки функционального программирования.

.

Оцените статью
oilgasindustry.ru
Добавить комментарий