Как заполнить конкретное поле выбора данными, возвращенными из вызова ajax?

ProgramBox

Как заполнить конкретное поле выбора данными, возвращенными из вызова ajax?

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

#jquery #ajax #python-3.x #flask-wtforms

Вопрос:

Обновите позже…Я наконец-то решил свою проблему. Мне просто интересно, есть ли способ сделать это более элегантно?

Я в самом начале программирования с помощью Python3 , Flask и Jquery .

Что я намереваюсь сделать, так это заставить одно из них SelectField изменять свои значения на основе другого SelectField параметра. Точно так же, когда я выбираю США в качестве страны, затем автоматически загружаю штаты (скажем, Нью-Йорк / Вашингтон, округ Колумбия / …) из базы данных с помощью ajax.

Теперь я мог получать данные с помощью вызова ajax, что означает, что я мог видеть ответ в режиме отладки браузера. Я просто не знаю, как заполнить конкретное SelectField данными ответа. Ниже приведен соответствующий фрагмент кода. Заранее спасибо за ваше время.

choose.html

 <html>
<head>...</head>
<body>
...
<div class="row">
  <form action="{{url_for('some_view_function')}}" method="post">
    ...
    <div class="col-md-4 col-sm-4 col-xs-12">
      {{ form.country(class="form-control select2_single") }}
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
      {{ form.state(class="form-control select2_single") }}
    </div>
    ...
  </form>
</div>
...
<script>
    $(document).ready(function(){
      $("#country").change(function(){
          country_id=$("#country").val();
          $.get("{{ url_for('get_states_by_country') }}",
                {"country_id":country_id},
                function(data, status){
                    if (status == 'success') {
                        // What should I do here with data?
                    }
          });
      });
  });
</script>
</body>
</html>

view_function.py

 @app.route('/obtain/states', methods={'GET', 'POST'})
def get_states_by_country():
    country_id = request.args.get("country_id")

    states = State.query.filter_by(
        country_id=country_id
    )
    return jsonify(
        {int(s.state_id): s.state_name
         for s in states}
    )

form.py

 class LinkChooseForm(Form):
    country = SelectField(label='Country')
    state = SelectField(label='State')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.country.choices = [(c.id, c.name) for c in Country.query.all()]
        self.state.choices = [] # I leave it empty when initiating

Обновление-1:
Данные имеют json формат. Макет данных ниже. key Было бы value <option> , и value было бы text of <option> .

 {
  "bash", "desc_for_bash",
  "csh", "desc_for_csh",
  ...
}

Обновление-2:
С помощью @Deepak я, наконец, решил эту проблему. Проблема, о которой я упоминал в ответе @Deepak (форма не принимает опцию выбора), заключается в неправильном сообщении. На самом деле, form действительно принимает опцию выбора на моей html странице. Я отлаживаю это и обнаруживаю, что мне не хватает сброса state.choices в моей функции действия. Вы могли заметить, что я оставляю state.choices пустое поле при инициализации объекта формы. Но flask-wtf подтвердил бы это, если ваш выбор на странице является одним из state.choices . Что, очевидно, не так, поскольку я оставляю его пустым. Поэтому я должен сбросить его с помощью, request.form.get('state') чтобы выполнить flask-wtf проверку. Ниже приведена функция отправки.

 @app.route('/test', methods={'GET', 'POST'})
def some_view_function():
    form = LinkChooseForm(**request.view_args)

    if request.method == 'POST':
        # The most important part here.
        form.state.choices = [(request.form.get('state'), "")]

        if form.validate_on_submit():
            action_entity = ActionEntity()
            action_entity.do(form)
            return redirect(url_for('.another_view_function'))
        else:
            # reset it as empty again
            form.state.choices = []

    return render_template(
        'result.html',
        form=form
    )

1. почему вы не можете использовать плагины для этого. почему вы сбрасываете базу данных

2. cssscript.com/demo/… пожалуйста, обратитесь к этому. надеюсь, это поможет

3. @Deepak Спасибо за ваше время. Но то, что я привел здесь, — это всего лишь пример. На самом деле, у меня есть два, SelectFields с конкретным бизнес-значением, а не country и state .

4. можете ли вы опубликовать свои данные в формате json или макет json, чтобы я мог написать код

5. @Deepak Я отредактировал свой пост, этого достаточно? Спасибо.

Ответ №1:

 var data = '{"bash":"desc_for_bash","csh":"desc_for_csh, city"}';//Your JSON data
data = JSON.parse(data);                                        //To parse your JSON data
var str=''
for(d in data)
str ='<option value="' d '">' data[d] '</option>'

$("#your_select_id").html(str)                                 //For adding options to select

1. Большое спасибо, у меня это работает. Всего лишь проблема, но это моя вина. Согласно моему коду в view_function.py , вы могли видеть, что данные уже являются json объектом. Поэтому я просто удаляю data=Json.parse(data); часть. Вы можете добавить некоторое описание к своему ответу.

2. Но это все еще блокирует меня при отправке всей формы. Похоже, что страница не принимает никаких опций для этого SelectField . Может быть, вы могли бы помочь дальше. Еще раз спасибо.

3. вы хотите сказать, что форма не принимает значение SelectField при отправке?

4. Спасибо Дипак, оказывается, мой код неверен, а не «форма не принимает значение SelectFeild при отправке». Я уже решил это. Мне просто интересно: есть ли способ сделать это более элегантным? Я имею в виду в основном часть javascript. Я просто не хочу вводить html код <script> .