Отдельные AJAX Формы на одноместный Django Просмотр

Question

Я не использую встроенные формы Django для отображения формы:

Внутри view.html это:

<div>
    <form id="note-form" method="POST">
    {% csrf_token %}
        <input type="hidden" name="form_name" value="noteForm" />
        <textarea id="note-body" class="uk-textarea" style="resize: none;"></textarea>
        <button type="submit" class="uk-button uk-button-primary uk-button-small uk-margin-small-top">Add Note</button>
    </form>
</div>

Внутри veiw.py это:

if request.POST.get('action') == 'post':
    note_body = request.POST.get('note_body')

    response_data.update(note_author = request.user.first_name + ' ' + request.user.last_name)
    response_data.update(note_time = datetime.now().strftime('%B %m, %Y at %I:%M %p'))
    response_data['note_body'] = note_body

    Note.objects.create(item_id = id, body = note_body, author = request.user)
    return JsonResponse(response_data)

Внутри view.js есть:

$(document).on('submit', '#note-form', function(event) {
    event.preventDefault()
    $.ajax({
        type: 'POST',
        data: {
            note_body: $('#note-body').val(),
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
        success: function(json) {
            document.getElementById("note-form").reset();
            $('#notes').prepend(
                '<div>' +
                    json.note_body +
                    '<div class="uk-text-meta">Created by ' + json.note_author + ' on ' + json.note_time + '</div>' +
                '</div>'
            )
        },
        error: function(xhr, errmsg, err) {
            console.log(xhr.status + ": " + xhr.responseText);
        }
    });
});

Это работает и работает как хорошо смазанный сон, пока я не попытаюсь добавить еще одну форму на страницу. Мне нужен способ, используя этот существующий код (или как можно больше), чтобы отделить POST, и я не могу понять это.

Я попытался изменить свой view.py, чтобы включить скрытое поле:

if request.method == 'POST':
    if request.POST.get('form_name') == 'noteForm':
        ...

Однако это нарушает код view.js; Я попытался изменить соответствие action: 'post' на action: 'noteForm', но это тоже не сработало - представление не получает возвращенные данные JSON, и DOM обновляет все как «неопределенное», а затем ничего не сохраняется в базу данных.

Answer 1

Если вы пытаетесь использовать одно представление для обработки двух видов запросов с двумя типами ответов. Имеет смысл использовать два разных представления.

Одно представление возвращает HTML с обеими формами. Другой обрабатывает ваш AJAX запрос и ответ.

Вы можете указать вашему AJAX запросу другую конечную точку с помощью свойства url в объекте настроек $.ajax.

$.ajax({
    url: '/path_to_ajax_endpoint/',
    type: 'POST',
    // The rest of your settings.
});