Django как обновить шаблон без обновления/перенаправления?

Я пытаюсь сделать простую систему комментирования, где кто-то может добавить свой комментарий к сообщению и он будет отображаться без необходимости перенаправления или обновления страницы. Вот как в основном выглядит мой код:

def post_details(request):
    details = {}
    if request.method == "POST":
      request.POST
      # Function here for creating a new comment
      details['new_comment'] = new_comment
      details['post_details'] = post_details
    else:
      details['post_details'] = post
    return render(request, 'post_details.html', details)

В post_details.html отображается пост с комментариями под ним вместе с формой, которая добавляет их комментарий. Я попытался добавить новый блок кода в файл шаблона для new_comment и проблема в том, что когда я добавляю новый комментарий, он обновляет эту часть, но добавление другого комментария не отображается.

Следует также отметить, что у меня есть CSV-файлы, в которых хранятся данные о сообщениях и комментариях. В моем файле models.py у меня есть классы и методы для чтения CSV-файлов, поэтому функция, которую я опустил, обновляет файл с комментариями. Я пытаюсь сделать это без Javascript, но я готов попробовать все, что угодно, просто очень хочу укрепить свое понимание запросов. Надеюсь, это не было непонятно.

В данной ситуации вы можете использовать JavaScript (AJAX).

  • Создайте в своем шаблоне базовое подразделение для отображения комментариев.
  • Затем создайте поле формы ввода, чтобы пользователь мог написать комментарий.
  • Присвойте кнопке отправки id, например, "addcomment" в моем случае.
  • Создайте нижеприведенную ajax функцию с соответствующими входными значениями.

AJAX Function in JAVASCRIPT

$('#addcomment').click(function(){
            // Taking_username_from_input_field_with_id_username.
            var user = $('#username').val(); 
            var usercomment = $('#usercomment').val(); // Taking_comment_from input_field_with_id_usercomment.
            var csr = "{{csrf_token}}"; // Creating CSRF Token
            $.ajax({
              url: "{% url 'savecomment' blog.blog_id %}",
              method:"POST",
              data:{
                user:user,
                usercomment:usercomment,
                csrfmiddlewaretoken:csr
              },
              success:function(data){
                form.reset(); // resetting form values. 
                var output = "";
                output =` <div class="comment">
                        <div class="comment-header d-flex justify-content-between">
                          <div class="user d-flex align-items-center">
                            <div class="image"><i class="fa fa-arrow-right"></i></div>
                            <div class="title"><strong>${data.user}</strong><span class="date">${data.date}</span></div>
                          </div>
                        </div>
                        <div class="comment-body">
                          <p>${data.comment}</p>
                        </div>
                      </div>`
                  
              $('.post-comments').append(output); // Appending data_in existing values which loaded_in first run.
              //for_updating commentcount
              var commentcount = data.number_of_comments;
              $('.no-of-comments').replaceWith(`<span class="no-of-comments">(${commentcount})</span>`);
              }
            });

ШАБЛОН КОММЕНТАРИЕВ

<div class="post-comments">
                  <header>
                    <h3 class="h6">Post Comments<span class="no-of-comments">0</span></h3>
                  </header>
</div>

ШАБЛОН ФОРМЫ

<form id="form" action="#" class="commenting-form">
    <div class="row">
        <div class="form-group col-md-6">
            <input type="text" name="username" value="{{page.username}}" id="username" placeholder="Name"
                class="form-control" disabled>
        </div>
        <div class="form-group col-md-12">
            <textarea name="usercomment" id="usercomment" placeholder="Type your comment"
                class="form-control"></textarea>
        </div>
        <div class="form-group col-md-12">
            <button id="addcomment" type="button" class="btn btn-secondary">Submit Comment</button>
        </div>
    </div>
</form>
Вернуться на верх