Как получать значения из вызова AJAX GET в flask restful?

ProgramBox

Как получать значения из вызова AJAX GET в flask restful?

Post author:admin
Запись опубликована:9 мая, 2023
Post category:Вопросы по программированию

#python #jquery #ajax #rest #flask

Вопрос:

Я использую API flask restful для прогнозирования погоды, flask_rest.py и веб-приложение для использования API с именем main.py. Я пытаюсь отобразить выходные данные с помощью AJAX в HTML-файле с именем sample.html. Но по какой-то причине результат не отображается динамически. Приветствуется любая помощь

flask_rest.py

 from flask import Flask, request, jsonify, Response
from flask_restful import Resource, Api, reqparse, abort

import pandas as pd
app = Flask(__name__)
api = Api(app)

df = pd.read_csv(r"C:UsersjayadDesktopGradCloud Computingdailyweather.csv", index_col=False)
data = df.set_index('DATE').to_dict(orient='index')
data_dict = pd.DataFrame(df['DATE'])
data_dict['INDEX'] = 'DATE'
data_dict = data_dict.set_index('INDEX').to_dict(orient='records')
parser = reqparse.RequestParser()
parser.add_argument('DATE', type=int)
parser.add_argument('TMAX', type=float)
parser.add_argument('TMIN', type=float)



class Historical(Resource):
    def get(self):

        return data_dict


    def post(self):
        args = parser.parse_args()
        val1 = args['DATE']
        val2 = args['TMAX']
        val3 = args['TMIN']
        data[val1] = {"TMAX":val2, "TMIN":val3}
        return data[val1], 500


class Spec_historical(Resource):
    def get(self, num):

        return data[num]

    def delete(self, num):
        del data[num]
        return "DELETION DONE 300"


class forecast(Resource):
    def get(self, num):
        pred_dates={}
        date = int(num)
        pred = date - 10000
        j=date
        for i in range(7):
            if date - i in data:
                x = data.get(date - i)
                v1 = x['TMAX']   20
                v2 = x['TMIN']   20
                pred_dates[j] = {'TMAX':v1, 'TMIN':v2}

            else:
                if pred - i in data:
                    x = data.get(pred - i)
                    v1 = x['TMAX']   10
                    v2 = x['TMIN']   10
                    pred_dates[j] = {'TMAX':v1, 'TMIN': v2}
            j =1

        return pred_dates


api.add_resource(Historical, '/Historical/')
api.add_resource(Spec_historical,'/Historical/<int:num>')
api.add_resource(forecast,'/forecast/<int:num>')

if __name__=="__main__":
    app.run(debug=True, port=5001)

main.py

 from flask import Flask, render_template, url_for, redirect, request, jsonify, Response
import requests
import simplejson as json

app = Flask(__name__)

@app.route('/forecast/', methods=['POST','GET'])
def forecast():
    error=''

    if request.method=="POST":

        a=request.form.get('given_date')

        pred_value=requests.get('http://localhost:5001/forecast/' str(a))
        if pred_value:


            return Response(pred_value)

        return jsonify({'error': 'Missing data'})

    return render_template('sample.html', error=error)

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

sample.html

 <!DOCTYPE html>
<html>
<head>
    <title>WEATHER API</title>  
</head>
<br>
<br>
<br>
<hr>
<body>
<form action="{{url_for('forecast')}}" method="POST">
    <label>DATE</label>
    <input type="text" name="given_date" id="given_date">
    <button class="btn btn-lg btn-primary btn-block" type="submit">Enter </button>
    <br>
    <br>
    <hr>

      <div id="result"/>
    </form> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="../static/jquery-3.0.0.js"></script>
    <script src="text/javascritpt">
        $(document).ready(function(){
            $('submit').on('click',function(event){
                event.preventDefault();
                var $result = $('#result')
                $.ajax({
                    type:'GET',
                    url:'/forecast/',
                    data:$('given_date')
                    dataType:'JSON'
                    success: function(result){
                         $('#result').append(JSON.stringify(result))
                    }

                }) 

             })

         })
        </script>

</body> 
</html>

ПОМОГИТЕ!!!

1. Можете ли вы добавить console.log(result); в success обратный вызов и показать нам результаты?

2. можете ли вы добавить ContentType: ‘application / json’ и success: function (ответ) на вызов .ajax и попробовать?

3. Пробовал. По-прежнему выходной словарь не загружается на той же странице.

Ответ №1:

Вам нужно изменить type:'GET' , на type:'POST' .

Кроме того, <div> для тегов требуется закрывающий тег,

так что измените это:

  <div id="result"/>

к этому:

 <div id="result"></div>

Если у вас все еще возникают проблемы, дайте мне знать.

1. Проблема все еще сохраняется. Результирующие значения словаря динамически не обновляются на той же странице!

2. @AdhithyaJD что вы подразумеваете под «динамически обновляемым»?

3. Выходные значения отображаются после обновления страницы. Я хочу, чтобы это отображалось прямо под вводом. Извините, если мой вопрос слишком простой или глупый… Я очень новичок в мире Ajax и jQuery. Приветствия!

4. Что-нибудь изменилось? Каковы ваши ожидаемые результаты, и что именно происходит сейчас?

5. Никаких изменений в выходных данных. Выходной словарь отображается после обновления страницы. функциональность ajax не работает. Я не знаю, какую ошибку я делаю.

Ответ №2:

Сначала у вас ошибка в вашем вызове ajax. Вы забыли # перед ‘given_date’:

         $.ajax({
            type:'GET',
            url:'/forecast/',
            data:$('#given_date').val()
            dataType:'JSON'
            success: function(result){
                 $('#result').append(JSON.stringify(result))
            }
        })

Если это не решит вашу проблему. удалите параметр data и попробуйте этот:

         $.ajax({
            type:'GET',
            url:'/forecast/'   $('#given_date').val(),
            dataType:'JSON'
            success: function(result){
                 $('#result').append(JSON.stringify(result))
            }

        })