Подключите JavaScript к Python сценарию с Flask - PullRequest
0 голосов
/ 30 января 2020

Я создал сайт с HTML / CSS полностью самостоятельно. Также используйте Javascript для событий (нажмите на кнопку, ...).

Теперь я хочу подключить к нему скрипт python и, что более важно, вернуть результаты из python на мой сайт и показать (использовать) их там. Рассмотрим что-то вроде этого:

Веб-сайт с входом и кнопкой. Если вы нажмете на кнопку, должен запуститься сценарий python, который вернётся, если ввод будет нечетным или четным числом (конечно, вам не нужно python для этого конкретного c случая, но я хочу это сделать)

Из моих исследований я считаю, Flask - это библиотека для этого (?), Но я действительно не знаю, как это сделать. Я нашел очень мало примеров. Я был бы очень признателен, если бы кто-то смог реализовать приведенный выше пример или сказать мне, как именно это сделать.

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

Ответы [ 2 ]

2 голосов
/ 30 января 2020

Вы правы в том, что Flask является хорошим решением для этого, и везде есть примеры и учебники. Если вам нужно просто запустить указанную функцию c при нажатии кнопки и вернуть что-то в javascript, я приведу краткий пример ниже.

# app.py
from flask import Flask, render_template
from flask import jsonify

app = Flask(__name__)

# Display your index page
@app.route("/")
def index():
    return render_template('index.html')

# A function to add two numbers
@app.route("/add")
def add():
    a = request.args.get('a')
    b = request.args.get('b')
    return jsonify({"result": a+b})

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=80)

Это может быть запустите с python app.py и убедитесь, что ваш индекс. html находится в том же каталоге. Тогда вы сможете набрать go до http://127.0.0.1/ и увидеть загрузку вашей страницы.

Это реализует функцию, которая добавляет два числа, это можно вызвать в вашем javascript с помощью звонить http://127.0.0.1/add?a=10&b=20. Это должно затем вернуть {"result": 30}.

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

let first = 10;
let second = 20;
fetch('http://127.0.0.1/add?a='+first+'&b='+second)
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    console.log("When I add "+first+" and "+second+" I get: " myJson.result);
  });

Это должно быть базовые основы, но как только вы можете отправить данные в Flask и получить данные обратно, у вас теперь есть интерфейс для запуска вещей в Python.

Редактировать: Полный пример Front-end

https://jsfiddle.net/4bv805L6/

0 голосов
/ 12 февраля 2020

Я очень ценю вашу помощь и потраченное время. Но твой ответ не помог мне так, как мне было нужно. В тот момент я понятия не имел, что делать, но с тех пор как я понял это некоторое время go (я смотрел видео на YouTube ...), я решил поделиться своим решением здесь ( придерживайтесь двух строк ) :

Thats app.py:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/stick', methods=['GET', 'POST'])
def stick():
    if request.method == 'POST':
        result = request.form['string1'] + request.form['string2']
        return render_template('index.html', result=result)
    else:   
        return render_template('index.html')

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

И этот индекс. html (положить в папку templates ):

<!DOCTYPE html>
<html>
<body>
    <h3> Stick two strings </h3>
    <form action="{{ url_for('stick') }}" method="post">
            <input type="text" name="string1">
            <input type="text" name="string2">
            <input type="submit" value="Go!">
            <p id="result"></p>
    </form>
<script>

document.getElementById("result").innerHTML = "{{result}}"

</script>
</body>
</html>

В терминале введите python stackpy.py , и он должен работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...