Django / Ajax: как асинхронно фильтровать набор запросов поля формы?

#javascript #django #ajax #asynchronous #django-forms

#javascript #django #ajax #асинхронный #django-forms

Вопрос:

В заданном представлении формы Django я хотел бы фильтровать набор запросов поля по параметру, выбранному пользователем при просмотре формы. И я бы хотел, чтобы это происходило асинхронно. Я читал, что AJAX может быть тем, что я должен использовать, но я очень мало знаю о JS, и я не могу понять смысл прочитанной информации.

На мой взгляд, я бы хотел, чтобы пользователь мог щелкнуть по одному или нескольким флажкам, которые будут фильтровать ‘loot.item_name’ по ‘item.in_itemlist’ или ‘item.item_type’ (автоматически, используя onChange или onUpdate или что-то еще?). Не мог бы кто-нибудь любезно дать мне несколько советов? Приветствия,

Вот мои модели:

models.py

 class Itemlist(models.Model):
    name = models.CharField([...])

class Item(models.Model):
    name = models.CharField([...])
    item_type = models.CharField([...])
    in_itemlist = models.ForeignKey(Itemlist, [...])

class Loot(models.Model):
    item_name = models.ForeignKey(Item, [...])
    quantity = [...]
 

мое мнение,

views.py

 def create_loot(request):
    # LootForm is a simple ModelForm, with some crispy layout stuff.
    form = LootForm(request.POST or None)
    if request.method == 'POST':
        if form.is_valid():
            form.save()
            [...]
    return render(request, 'loot_form.html', context={'form': form}
 

и шаблон,

loot_form.html

 {% extends "base_generic.html" %}

{% block leftsidebar %}
   /* for each unique itemlist referenced in the items, */
   /* make a checkbox that once clicked, filters 'loot.item_name' by the selected option.*/
{% endblock leftsidebar %}

{% block content %}

  <h1 class="page-title">Add Loot</h1>
  <hr class="page-title-hr">

  {% csrf_token %}
  {% load crispy_forms_tags %}
  {% crispy form form.helper %}

{% endblock content %}
 

Ответ №1:

Вы можете создать представление на основе Api для своей модели

в JavaScript вы можете вызвать конец API и получить данные Ajax-код может быть примерно таким, как показано ниже

 $(document).ready(function () {
    setTimeout(function () {
      $(document).on('click', '#id', function () {
        $.get("./api/v2/end_point?state="   state, function (data, status) {
          var inner_data = data[0].state_count;
          change_text.html(inner_data);
        });
      });
    }, 100);
})