Перезагрузка значения переменной при обновлении значения с сервера (FLASK, HTML, JQUERY)

Question

Я очень новичок в python и начинаю узнавать об использовании AJAX и Jquery. Я попытаюсь четко сформулировать свою проблему, но если она каким-то образом неясна, сообщите мне об этом, и я постараюсь ее улучшить.

У меня есть веб-приложение, которое запускается из пользовательского интерфейса функции. py, а userinterface.py должен запускаться из функции central.py.

В central.py есть переменная с именем «devicequantity», которая должна быть назначена элементу div в html. Я попытался использовать для этого запрос ajax (devicequantity - это изменяющаяся переменная).

В моем веб-приложении есть некоторые поля, которые скрыты в зависимости от значения devicequantity. Как я могу назначить количество устройств веб-приложению и позволить ему обновляться всякий раз, когда новое значение назначается через central.py? Большое спасибо за любые отзывы и помощь!

Вот мои коды:

html

<div class="col-sm-4 d-inline-flex justify-content-center align-items-center my-0">
  Device quantity:
  <div class="border col-sm-5 px-2 py-2 justify-content-center align-items-center" type="number" id="devicequantity" name="devicequantity"> {{ devicequantity }} </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script>
$(document).ready(function(){
    $.ajax({
      url:"/getdevicequantity",
      type: "get",
      success: function(response){
        $("#devicequantity").html(response.devicequantity);
      }
    });
    $('#alertsettings').hide(); $('#alertfillfield').hide(); $("#device1").hide(); $("#device2").hide(); $("#device3").hide(); $("#device4").hide(); $("#device5").hide(); $("#device6").hide(); $("#device7").hide(); $("#device8").hide(); $("#device9").hide();$("#device10").hide(); $("#SubmitSecondPart").hide(); $("#alertquantity").show();
    if ($("#devicequantity").val() == 1) {$("#alertquantity").hide(); $("#device1").show(); $("#SubmitSecondPart").show();
    }
    else if ($("#devicequantity").val() == 2) {$("#alertquantity").hide(); $("#device1").show(); $("#device2").show(); $("#SubmitSecondPart").show();
    }
    else if ($("#devicequantity").val() == 3) {$("#alertquantity").hide(); $("#device1").show(); $("#device2").show(); $("#device3").show(); $("#SubmitSecondPart").show();
    }
});
</script>
</script>

пользовательский интерфейс. py

@app.route("/", methods=['GET', 'POST'])
def home():
   if request.method == 'POST':
      getInputsSettings()
      getInputsLicenses()
   return render_template('printerlabel.html', devicequantity=devicequantity)

@app.route("/getdevicequantity")
def getdevicequantity():
   return jsonify({'devicequantity' : devicequantity})

def runuserinterface():
   app.run()

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

central.py

devicequantity = 10
if __name__ == "__main__":
    userinterface.devicequantity=devicequantity
    userinterface.runuserinterface()

Answer 1

Ваша AJAX функция обратного вызова имеет параметр ответа, который вам необходимо использовать.

Он должен выглядеть так:

success: function(response){
    $("#devicequantity").html(response.devicequantity);
}

Для целей отладки вы можете попробовать

success: function(response){
    console.log(response);
}