Когда-нибудь задумывались, как передавать данные между двумя языками программирования? Вы когда-нибудь пытались отправить объект или несколько фрагментов данных?
Сегодня я покажу вам, как использовать 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 () определяет функцию или метод, называемый output , который будет запускаться всякий раз, когда вызывается эта конечная точка. Эти методы не должны использовать то же имя, что и конечная точка, — назовите любое подходящее имя. Внутри этого метода есть простой Hello, World! строка. Наконец, настройте ваш скрипт так, чтобы он действительно запускался при запросе:
if __name__ == "__main__": app.run()
Сохраните этот скрипт как json_io.py в подходящем месте. Вернитесь к своему терминалу и перейдите в папку вашего проекта. Запустите скрипт:
python json_io.py
Слово python используется, чтобы сообщить компьютеру, что следующий файл должен быть запущен как скрипт Python. Имя файла после этого — это имя файла, который вы хотите запустить как Python. Если все работает правильно, вы должны увидеть сообщение о состоянии в Терминале:
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Это показывает вам IP-адрес, на котором работает ваш сервер, а также порт. Это будут 127.0.0.1 и 5000 . Вы можете нажать CTRL > C, чтобы остановить этот запуск, но пока не делайте этого.
Введите адрес в свой браузер, и вы должны увидеть Hello, World! появляются на экране. Теперь вы успешно настроили сервер Python и написали свой первый скрипт! Вам нужно будет перезапустить сервер (остановите скрипт, затем запустите его снова), если вы внесете какие-либо изменения.
Если вы хотите просматривать свои скрипты на другом компьютере в той же сети, измените app.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 и используйте шаблоны только для отображения данных. Будет очень грязно, если вы начнете пытаться усложнить шаблон.
Создайте папку в каталоге вашего проекта под названием шаблоны . Flask распознает файлы в этой папке как файлы шаблонов. Не размещайте здесь скрипты Python, здесь вы можете разместить свои HTML-файлы.
Создайте файл с именем index.html . Внутри него поместите следующий код:
{{ name }}
Это способ получить доступ к части данных под названием name , которая будет найдена в ваших скриптах. Вернитесь к своему json_io.py . сценарий и измените функцию вывода . Вместо того, чтобы возвращать привет , введите этот код:
return render_template("index.html", name="Joe")
Это загрузит файл index.html, который вы создали ранее, и заменит тег шаблона {{name}} на строку Joe . Вы можете использовать этот метод для загрузки любой страницы в папке вашего шаблона и передачи им любого объема данных.
Код
Теперь, когда вы знаете, как работают шаблоны, вам нужен полный HTML-код. Вставьте это в ваш файл index.html :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript"> // 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(); } </script> This will send data using AJAX to Python:<br /><br /> <a id="theButton">Click Me</a>
Обратите внимание, что это не включает 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 . Вторая часть определения маршрута ( method = [‘POST’] ) определяет, как получить доступ к этой странице. Поскольку POST является единственным указанным способом, этот маршрут будет запрещать любые другие http-запросы (например, GET ).
Эта конечная точка / получателя просто зацикливается на каждой строке JSON и добавляет строку make машины к строке, которая затем возвращается после цикла. JSON хранится в переменной данных , и поскольку используется request.get_json () , Python знает, что это объект JSON. Переменная item внутри цикла for может рассматриваться как строка данных. Доступ к различным элементам каждой строки можно получить, используя их имя в квадратных скобках ( item [‘make’] ).
Откройте инструменты разработчика браузера ( CMD > ALT > I в Mac OS / Chrome) и перейдите на вкладку сети . Нажмите кнопку, и вы должны увидеть ответ сервера:
Попробуйте изменить исходный JSON и посмотрите, что произойдет. Давайте изменим Python, чтобы сделать что-то другое, в зависимости от JSON. Вот новый код, который вам нужен для цикла for :
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 для изменения вывода в зависимости от ввода. Вы можете легко адаптировать это для записи в базу данных или запустить другой фрагмент кода. Вот как это выглядит сейчас:
Теперь у вас должно быть четкое понимание того, как настроить сервер Python и как вы можете отвечать на запросы JSON.
Вам нравится кодировать в JavaScript? Попробуйте ! Вы также можете улучшить свои навыки разработчика, освоив определенные методы массива JavaScript. массива овладеть овладеть и другие функциональные языки программирования