Django: Как отправить элемент div в views.py без перезагрузки страницы?

Я борюсь с этой проблемой уже более четырех дней. Я просмотрел много документации, но мне ничего не помогло. Я работаю над созданием веб-приложения Django. Проблема в том, что мне нужно получить содержимое (т.е. текст внутри) элемента div через форму отправки (отправляется с помощью кнопки). Загвоздка в том, что содержимое внутри div-элемента не фиксировано. Изначально оно пустое, затем меняется и показывает информацию о действиях, выполненных на странице. Я пытаюсь сохранить эту информацию в список на стороне сервера по очереди. Идеальным решением будет "каждый раз, когда я нажимаю кнопку save-info и информация добавляется в список информации, присутствующий в views.py (веб-страница не обновляется по нажатию кнопки)".
Я исследовал вопрос о размещении элементов div на сервере с помощью JQuery и попробовал сам, но не смог добиться успеха. Может ли кто-нибудь подсказать, как мне решить эту задачу?

Мои усилия: 

    <form method="POST" id = 'notes_form' action="##" >
        {% csrf_token %}
        <div id="notes" cols="5" rows="2"></div>
        <input type="submit" id="note_btn_id" value="save info">
    </form>

    <script>
        $(document).ready(function(){
            $('#notes_form').submit(function(event){
                event.preventDefault();
                var notesForm = $(this);
                var posting = $.post(notesForm.attr('action'),notesForm.serialize());
                
                posting.done(function(data){
                    console.log("SUCCESS");
                });
                posting.fail(function(data){
                    console.log("Try again");
                })
            });
        });
        
    </script>

Сторона сервера: 

    data_pos =[]
    if request.method == "POST":
        print("request method is POST")

        content = request.POST['notes']
        # print(f"Contents received*: {content}")
        print("posted contents",request.POST)

        if request.POST.get("note_btn_id"):
            print("save info button detected")
            print(request.POST)
            content = request.POST['notes']
            data_pos.append(content)
            print(f"Contents received**: {content}")

По-прежнему серверная сторона не может получить элемент "notes". Он выдает ошибку, показывая, что "notes" не присутствует (MultiDictKeyError). Более того, если я закомментирую request.POST['notes'], утверждение if request.POST.get("note_btn_id"): всегда будет ложным. Что мне делать?

Это способ достичь того, чего, как я думаю, вы хотите с помощью подходов django-braces и Jquery.

Сначала установите django-braces. Эта библиотека является обязательной во всех моих django проектах, потому что она предоставляет вам несколько полезных миксинов, в основном связанных с разрешениями.

On views.py:

from braces.views import JSONResponseMixin

class PostCreateAsJSON(JSONResponseMixin):
    def post(self, request, *args, **kwargs):
        # Whatever you want to do to create the post.
        # You will have your data on request.POST

В вашем файле javascript:

$( '#note_btn_id' ).on('click', function(e) {
    e.preventDefault()
    const csrf_token = $( 'wherever_you_have_your_csrftoken' ).val()
    const contents = $( '#notes' ).text()
    
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            xhr.setRequestHeader('X-CSRFToken', csrf_token)
        }
    })

    $.ajax({
        type: 'post',
        url: 'your_PostCreateAsJSON_URL',
        data: {
            contents: contents
        },
        success: function(data, status, jqXHR) {
            console.log('Here you could update your frontend if needed')
        }
    })
}

В вашем шаблоне, я не думаю, что вам действительно нужна форма. Вы пытаетесь получить содержимое DIV при нажатии на кнопку, поэтому, возможно, вам нужно только это:

<div id="notes">{{ current_content|safe }}</div>
<button id="note_btn_id">{% trans 'Save' %}</button>
Вернуться на верх