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

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

Как я это вижу, я бы хотел, чтобы пользователь мог щелкнуть один или несколько флажков, которые будут фильтровать «loot.item_name» по «item.in_itemlist» или «item.item_type» (автоматически, используя onChange или onUpdate или что-л?). Кто-нибудь любезно подскажет? Ваше здоровье,

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

модели.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 = [...]

мой взгляд,

просмотры.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 %}

🤔 А знаете ли вы, что...
JavaScript можно использовать для создания ботов и автоматизации задач в браузерах с помощью Puppeteer.


551
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);
})