Django: Как загрузить новые последние комментарии в шаблоне Django без обновления страницы? - PullRequest
Новая
       5

Django: Как загрузить новые последние комментарии в шаблоне Django без обновления страницы?

0 голосов
/ 26 апреля 2020

На самом деле, я работаю с разделом комментариев в Django.

модели комментариев в models.py 

from django.db import models
from django.contrib.auth.models import User

class comment(models.Model):
    message=models.CharField(max_length=300)
    time=models.DateTimeField(auto_now_add=True)
    user=models.ForeignKey(User,related_name="my_comment",on_delete=models.CASCADE)
    post=models.ForeignKey(posti,on_delete=models.CASCADE,related_name="post_comment") #posti is a post model

    class Meta:
        ordering=['time']

    def __str__(self):
        return self.message

простого представления в views.py для создания нового комментария. 

@csrf_exempt
def add_comment(request,pk):
    if request.method == "POST":
        obj=posti.objects.get(pk=pk)
        value=request.POST.get("message")
        new=comment(message=value,user=request.user,post=obj)
        new.save()
        return HttpResponse(new)

HTML файл для загрузки сообщений и комментариев. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>
<body>
    <div>
        <p>{{post_data}}</p>
    </div>
    <br>
    <div id="add">
        {% for i in comments%}
            <div><p>{{i.message}}</p><br><span>{{i.time}}{{i.user}}</span></div>
        {% endfor %}
    </div>
    <div>
        <form id="my_form" action="{% url 'a' pk=id %}" method="POST">
            {% csrf_token %}
            <input name="message" type="text"><br>
            <button id="click" type="submit">Comment</button>
        </form>
    </div>
    <h1></h1>
    <script>
    $(document).ready(function(){
        $("#my_form").submit(function(){
            $.ajax({
                url:$(this).attr("action"),
                type:$(this).attr("method"),
                data:$(this).serialize(),
                success:function(data){
                    //$("h1").text(data['time']);
                    console.log(data);
                }
            });
            return false;
        });
    });
    </script>
</body>
</html>

Здесь я использую ajax, чтобы пользователи могли публиковать новые комментарии к сообщению без обновления страница. Новые комментарии в базе данных хранятся без обновления страницы, но как я могу загрузить новые комментарии в этот файл HTML без обновления страницы. Если у вас есть идеи, пожалуйста, сообщите мне.

Ответы [ 3 ]

0 голосов
/ 26 апреля 2020

Предполагая, что ответ на ваш звонок ajax будет таким, как показано ниже: 

data = {"message": "----", "time":"----", "user":"---"}

Тогда это должно работать: 

$.ajax({
    url:$(this).attr("action"),
    type:$(this).attr("method"),
    data:$(this).serialize(),
    success:function(data){
        //$("h1").text(data['time']);
        console.log(data);

        $('#add').append(
            "<div><p>" + data.message + "</p><br><span>" + data.time + " " + date.user + "</span></div>"
        )
    }
});
0 голосов
/ 28 апреля 2020

@ OBAA и @nilayshah спасибо за ответ. но обе ваши логики c отличаются и не подходят для этого вопроса, так что я сделал.

Привет всем, после поиска по inte rnet я получил решение этой проблемы.

Я просто создаю новое имя шаблона div. html в моих папках шаблонов. Затем я получаю новые последние комментарии к этому шаблону. Когда мой ajax получает сообщение об успехе, я загружаю этот шаблон div. html в мой основной шаблон.

div. html

<div><p>{{i.message}}</p><br><span>{{i.time}}{{i.user}}</span></div>

мой вид обновления для создания нового комментария. 

@csrf_exempt
def add_comment(request,pk):
    if request.method == "POST":
        obj=posti.objects.get(pk=pk)
        value=request.POST.get("message")
        new=comment(message=value,user=request.user,post=obj)
        new.save()
        x=new.user
        x=list(x.my_comment.all())[-1]
        return render(request,'div.html',{'i':x})

когда ajax получает сообщение об успехе, тогда я просто добавляю данные в мои комментарии div и сбрасываю форму, как это. 

                success:function(data){
                    $("#add").append(data);
                    $("#my_form")[0].reset();
                }
0 голосов
/ 26 апреля 2020

Использование ajax на стороне внешнего интерфейса. Когда вы добавляете комментарий, он вызывает api (django также поддерживает ajax вызовы). Метод вызова Api (определенный в представлении) добавляет комментарий в базу данных. Отправить ответ на вызов ajax (как согласно логике вашего приложения c) В этом случае вам необходимо добавить все комментарии для публикации на ajax вызов Записать логи c, чтобы добавить строку в ваш комментарий на веб-интерфейсе после получения ответа API.

Это будет сделано асинхронно, без обновления вашей страницы.

В вашем фрагменте кода В начале вашего кода добавьте тег сценария для javascript support Предоставьте идентификатор вашему div внутри для цикла И после получения успешного ответа : Используйте

document.getElementById('id').innerhtml += "<p>" + data.comment.message + " " + data.comment.user + "</p>"

Чтобы понять это, обратитесь к функции getElement в JavaScript. Я надеюсь, что это решит вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...