Запустить код Python, который подается через флягу в JavaScript при нажатии кнопки - PullRequest
Новая
       1

Запустить код Python, который подается через флягу в JavaScript при нажатии кнопки

0 голосов
/ 21 сентября 2018

Я пытаюсь запустить некоторый код Python, который подается через Flask, и я хочу, чтобы этот код Python возвращал значение в javascript, чтобы я мог использовать его там.

В этом случае у меня естькнопка в HTML, когда я нажимаю на нее, я хочу, чтобы запускался код на языке Python (подается через Flask), и он должен возвращать «Hello», который я могу использовать в HTML, например, для отображения или сохранения другой переменной.

Вот мои коды:

ajax.html

<!doctype html>
<html>
<head>
    <title>country</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

</head>
<body>

<button id="btn" onclick="flaskcall()">display</button>
<p id="display-here">Display here {{ temp }}</p>
<script>


function flaskcall()
{
    $.ajax(
  {
     type: "POST",
     url: "/hello",
     dataType: "html",
     success: function(msg)
     {
         console.log(msg);
             $("#display-here").html(msg);

     },
    error: function (xhr, status, error) {
        console.log(error);
    }

});
}

 </script>

</body>

</html>

flaskajax.py

from flask import Flask

app = Flask(__name__)
@app.route("/hello", methods=['GET', 'POST'])


def Hello():
    message = "Hello"
    return render_template("ajax.html", temp=message)

if __name__ == '__main__':
    app.run(debug=True)

webserver.py

import SimpleHTTPServer
import SocketServer

PORT = 8888

Handler = SimpleHTTPServer.SimpleHTTPRequestHandler

httpd = SocketServer.TCPServer(("", PORT), Handler)

print "serving at port", PORT
httpd.serve_forever()

Что я 'я делаю, я бегу webserver.py, и я перехожу на http://localhost:8888/ajax.html, и когда я нажимаю кнопку display, я вижу эту ошибку

Сообщение об ошибке

Я даже не знаю, правильно ли я это делаю или нет, я также не понимаю методы GET и POST.Если кто-то понимает, что я на самом деле пытаюсь сделать, и если они могут объяснить мне, что на самом деле происходит за капотом, я буду благодарен.Пожалуйста, прокомментируйте, если вам нужна дополнительная информация.

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Похоже, вы используете webserver.py, который не имеет ничего общего с вашим приложением для фляги.

вы должны запустить его как:

python flaskajax.py

, который запустит свой собственный веб-сервер и прослушивает по умолчанию 5000, и вы можете перейти к http://localhost:5000/hello

Некоторые проблемы с вашим кодом, однако, вы забыли импортировать render_template.Вот как это должно быть, 

from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/hello", methods=['GET', 'POST'])


def Hello():
    message = "Hello"
    return render_template("ajax.html", temp=message)

if __name__ == '__main__':
    app.run(debug=True)
0 голосов
/ 21 сентября 2018

Вот ваш второй сервер, использующий флешку: 

from flask import Flask, Response

app = Flask(__name__)


@app.route("/ajax")
def Hello():
    resp = Response("Hello")
    resp.headers['Access-Control-Allow-Origin'] = '*'
    return resp


if __name__ == '__main__':
    app.run(debug=True)

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

В вашем index.html введите это в <body> на данный момент: 

<h1>Hello from Flask.</h1>
<button id="btn" onclick="flaskcall()">display</button>
<p id="display-here"></p>
<script>
    function flaskcall() {
        fetch("//localhost:5000/ajax").then(res => res.text()).then(res => {
            document.querySelector("#display-here").textContent = res;
        });
    }
</script>

Функция будет использовать AJAX для запроса GET /ajax от сервера фляги, на который сервер ответит Hello,Затем ответ вставляется в документ (для безопасности используется версия не-jQuery).

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

Нет похожих вопросов

...