как получить и опубликовать данные в раскрывающемся меню Flask

Question

Я использую flask, и мне трудно вернуть данные из раскрывающегося меню, я перечисляю значения в раскрывающемся меню из списка «Мои устройства», так как я использую метод Get, я знаю, что Я не могу использовать методы Get и Post одновременно, так как я могу вернуть свою переменную устройства, когда я выбрал устройство? возможно, используя сценарий java? есть ли другой способ получить данные без написания кода сценария java?

<form id="form" action="" method="POST">
<div class="container">
    <div class="row">
    <a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Select Device  <img src="/static/pictures/down-arrow.png"></a>
        <ul id='dropdown1' class='dropdown-content'>
          <li><a name="device" method="GET" SelectDevice="/">
            <li><a inputmode="submit" value="{{mydevices[0]}}" selected>{{mydevices[0]}}</a></li>

             {% for device in mydevices[1:] %}

              <li><a value="{{device}}">{{device}}</a></li>
              {% endfor %}
<!--  </li></a> -->
  </ul>

</div>

</div>

 <div class="container">
    <div class="row">
         <div class="col-md-4 col-sm-4 col-xs-12 form-group">
              <label class="labeltext">filter Data by:</label><br>
                  <div class="form-check-inline">

                    <label class="customradio"><span class="radiotextsty">Days</span>
                      <input type="radio" checked="checked" name="radio" value="Days">
                      <span class="checkmark"></span>
                    </label>
                    <label class="customradio"><span class="radiotextsty">Months</span>
                      <input type="radio" name="radio" value="Months">
                      <span class="checkmark"></span>
                    </label>
                    <label class="customradio"><span class="radiotextsty">Seasons</span>
                      <input type="radio" name="radio" value="Seasons">
                      <span class="checkmark"></span>
                    </label>

                </div>
         </div>


    <div class="row">
        <button action= {{url_for('index')}} class="col s2 offset-s5 waves-effect waves-light btn" id="sub" type="submit" >Reset</button>
    </div></div>
          </div>
    </div>

</form>

и это мой код python

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

mydevices = ['Hall', 'Door101', 'Door102', 'Garage' , 'Fiat 500','Audi A3']

if request.method == 'POST':
       chosendevice = request.form['device']




return render_template('device_statistics.html', mydevices=mydevices, error=error)

....

это ошибка, я получение:

werkzeug.exceptions.BadRequestKeyError
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'device'

Answer 1

Я думаю, вам нужны данные асинхронно, поэтому нужно использовать javascript. если вы последуете за мной -

измененная часть вашего html -

<ul id='dropdown1' class='dropdown-content'>
   <li><a name="device" method="GET" SelectDevice="/">

   <!-- added an id (submitButton) to call function in javascript -->  
   <li><a id="submitButton" inputmode="submit" value="{{mydevices[0]}}" selected>{{mydevices[0]}}</a></li>
 
   

</ul>

Используйте javascript fetch api для отправки почтового запроса на flask:

const button = document.getElementById('submitButton');

button.onClick = function(){

  chosendevice = // its your responsibility to bring the device name here as string

  fetch(`${window.origin}/device_statistics`, {
     method: "POST",
     credentials: "include",
     cache: "no-cache",
     body: chosendevice,

  }).then(res => {
      // here response comes (not your question primarily)

     if(res.status !== 200) return;

     res.text().then(data => 

      // do whatever 

     });

  }).catch(e => {
     console.log(e);
  });

}

ваш flask бэкэнд:

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

        mydevices = ['Hall', 'Door101', 'Door102', 'Garage' , 'Fiat 500','Audi A3']

        if request.method == 'POST':
           chosendevice = request.get_data().decode('utf-8')
           print(chosendevice)

           # do whatever with chosendevice          

           return 'whatever'

    return render_template('device_statistics.html', mydevices=mydevices, error=error)

Answer 2

Элемент списка:

<ul>
  <li></li>
  <li></li>
</ul>

не является input элементом <form>. Следовательно:

chosendevice = request.form['device']

дает ключевую ошибку, поскольку device отсутствует в форме. Я думаю, что вам нужен элемент <select>, который является частью формы. Кроме того, вы можете прикрепить к своему списку обработчик кликов, но это немного сложнее. Я думаю, что это то, что вы пытались сделать со своими тегами <a>, но это неправильный способ сделать это.

См .: https://wtforms.readthedocs.io/en/2.3.x/fields/#basic -поля для использования SelectField

Попробуйте:

chosendevice = request.form.get('device', 'not in form')

print(chosendevice)

И вы увидите, что его там нет.