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