Блог

Главная - Вопросы по программированию - Как вернуть однострочное значение из flask в тег Html label?

Как вернуть однострочное значение из flask в тег Html label?

#python #flask #data-binding

#python #flask #привязка данных

Вопрос:

Я пытаюсь взаимодействовать со своей моделью машинного обучения, где я могу получить входное значение для метода маршрута flask из HTML, но не могу передать ответ со строковым значением на запрос ajax.

Нажатие кнопки вызывает функцию ajax и запускает функцию маршрута flask, но это даже не влияет на часть успеха или ошибки функции ajax. Выдает ошибку 405 Метод не разрешен. 127.0.0.1 — — [12 / Oct / 2020 13:15:17] «POST / HTTP / 1.1» 405 —

Я новичок в Flask и не знаю о параметрах привязки данных. Любая помощь будет оценена.

HTML-ЧАСТЬ

 <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ url_for('static', 
     filename='css/bootstrap.min.css') }}">
           <title>Twitter Sarcasm Detection</title>
    <script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
    </script> 
    <script src="static/js/signUp.js"></script>
    <style>
    h1 {
        margin-top: 13rem;
        color: chocolate
    }
    p{
        margin-top: 36px;
    }
    .form-group{
        margin: 3rem !important;
    }
    </style>

    </head>
    <body>
<div class="container" style="text-align:center">
<h1>Twitter Sarcasm Detection</h1>
<p>Enter the text below to find out if its Sarcastic or not!</p>
<form action="http://localhost:5000/" method="post">
    <div class="form-group">
    <input type="text" class="form-control" id="userText" name="userText">
    </div>
    <button id="submit" class="btn btn-primary">Submit</button>
    <input type="reset" value="Reset" class="btn btn-primary">
    <div class="form-group">
    <label id="prediction" name="prediction"></label>
    </div>
</form>
</div>

AJAX-запрос в файле сценария

     $(function(){
    $('#submit').click(function(){
        $.ajax({
            url: '/predictSarcasm',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response){
                    $('#prediction').val(response.result);
                },
                error: function(error){
                    console.log(error);
                }
        });
    });
});

Код FLASK

     from flask import Flask, render_template, json
from joblib import load

pipeline = load("text_classification.joblib")

def requestResults(text):
    tweet = pipeline.predict([text])
    if tweet == 0:
        return "Not-Sarcastic"
    else:
        return "Sarcastic"

app = Flask(__name__)

@app.route("/")
def home():
    return render_template('Index.html')
    
@app.route('/predictSarcasm', methods=['POST'])
def predictSarcasm():
    text = request.form['userText']
    prediction = requestResults(text)
    return json.dumps({'status':'OK','result':str(prediction)});

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

Ответ №1:

вам не нужно использовать формы для ajax

Html-код

 <h1>Twitter Sarcasm Detection</h1>
<p>Enter the text below to find out if its Sarcastic or not!</p>
    <div class="form-group">
    <input type="text" class="form-control" id="userText" name="userText">
    </div>
    <button id="submit" class="btn btn-primary">Submit</button>
    <input type="reset" value="Reset" class="btn btn-primary">
    <div class="form-group">
    <label id="prediction" name="prediction"></label>
    </div>
</div>

Код Ajax

 $('#submit').click(function(){
        $.ajax({
            url: '/predictSarcasm',
            contentType: "application/json",
           data: JSON.stringify({ "text": $('#userText').val()})
            type: 'POST',
            success: function(response){
                    $('#prediction').val(response.result);
                },
                error: function(error){
                    console.log(error);
                }
        });
    });

Код Python

 from flask import jsonify

@app.route('/predictSarcasm', methods=['POST'])
def predictSarcasm():
    json= request.get_json()
    text=json["text"]
    prediction = requestResults(text)
    return jsonify({"status":"OK",'result':str(prediction)})