Запрос к базе данных Django с помощью Jquery и Ajax

Question

У меня есть запрос POST, который передает данные в мою базу данных при отправке формы.

Фото того, что я имею в виду:

home.html

 <script type="text/javascript">
        $(document).ready(function(){
            var postForm = $(".form-post")

            //POSTING DATA INTO DATABASE
            postForm.submit(function(event){
                event.preventDefault();
                var thisForm =$(this)
                var actionEndPoint = thisForm.attr("action");
                var httpMethod = thisForm.attr("method");
                var formData = thisForm.serialize();

                $.ajax({
                    url: actionEndPoint,
                    method: httpMethod,
                    data: formData,
                    success:function(data){
                        console.log(data)
                        $(".form-post")[0].reset();

                        //I WANT TO PASS THE NEWLY ADDED DATA TO DISPLAY WITHOUT REFRESH
                        $.ajax({
                        type: 'GET',
                        url: '{% url "postInfo" %}',
                        dataType : 'json',
                        success: function(cdata){
                            $.each(cdata, function(id,posts){
                            $('#cb').append('<li>' +posts['fields'].title+ '  ' +posts['fields'].body+ '</li>');
                        });
                    }
                    });

                    },
                    error:function(errData){

                    }

                })
            })

        })
    </script>

Как сейчас, он показывает несколько одинаковых постов каждый раз, когда я добавляю пост.

Это мои взгляды

views.py

def postInfo(request): # GET REQUEST
    if request.method == 'GET' and request.is_ajax():
        mytitle = Post.objects.all().order_by('-date_posted')
        response = serializers.serialize("json", mytitle)
        return HttpResponse(response, content_type='application/json')



def posting(request):  # POST REQUEST
    if request.method == 'POST' and request.is_ajax():
        title = request.POST.get('postTitle')
        content = request.POST.get('postContent')
        post = Post()
        post.title = title
        post.body = content
        post.author = request.user
        post.save()
        return HttpResponse('') 

models.py

class Post(models.Model):
    title = models.CharField(max_length=50)
    body = models.TextField()
    date_posted = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.CASCADE)

    def __str__(self):
        return self.title

Как я могу сделать так, чтобы он просто отображал добавленный мной пост + что находится в базе данных, не показывая несколько одинаковых постов? Спасибо за любую помощь.

Answer 1

Вы получаете множители, потому что вы запрашиваете отправку каждого сообщения в базе данных после успешного выполнения запроса POST.

Предполагая, что cdata является массивом, вы можете сделать что-то вроде

let innerHtml;
cdata.forEach(function(obj) {
    innerHtml.append(`<li>${data['fields'].title} ${data['fields'].body}</li>`);
});

$('#cb').html(innerHtml);

$('#cb').html(...) заменит HTML-содержимое элемента, а не добавит к нему, поэтому вы не получите повторяющихся записей. Также использование литерала шаблона в методе append может сделать вещи немного чище.

Или вы можете просто отправить только что созданное вами сообщение в posting представлении в HttpResponse. Это также будет быстрее, так как вы уменьшите количество запросов, сделанных при отправке формы.

views.py

# Other endpoints
...

def posting(request):  # POST REQUEST
    if request.method == 'POST' and request.is_ajax():
        title = request.POST.get('postTitle')
        content = request.POST.get('postContent')
        post = Post()
        post.title = title
        post.body = content
        post.author = request.user
        post.save()

        # Send new post as response
        response = serializers.serialize('json', post)
        return HttpResponse(response, content_type='application/json') 

home.html

<script type="text/javascript">
  $(document).ready(function(){
    var postForm = $(".form-post");

    // POSTING DATA INTO DATABASE
    postForm.submit(function(event){
      event.preventDefault();
      var thisForm = $(this);
      var actionEndPoint = thisForm.attr("action");
      var httpMethod = thisForm.attr("method");
      var formData = thisForm.serialize();

      $.ajax({
        url: actionEndPoint,
        method: httpMethod,
        data: formData,
        success: function(data) {
          console.log(data);
          $(".form-post")[0].reset();

          // Add the new post to $('#cb')
          $('#cb')
            .append(`<li>${data['fields'].title} ${data['fields'].body}</li>`);         
        },
        error: function(errData){
          // Do something
        }
      })
    })

  })
</script>

Answer 2

Вид POST может возвращать сериализованный экземпляр следующим образом.Это может быть не совсем правильно, так как я не знаю, что вы используете для сериализации, но это должно дать вам представление.

Если вам это не нравится, вы можете ввести идентификаторы поста.как атрибут data-post-id в html, тогда добавьте его к $('#cb'), только если он не существует.

def posting(request):  # POST REQUEST
    if request.method == 'POST' and request.is_ajax():
        title = request.POST.get('postTitle')
        content = request.POST.get('postContent')
        post = Post()
        post.title = title
        post.body = content
        post.author = request.user
        post.save()
        response = serializers.serialize("json", post)
        return HttpResponse(response, content_type='application/json')

$.ajax({
    url: actionEndPoint,
    method: httpMethod,
    data: formData,
    success:function(data){
        console.log(data)
        $(".form-post")[0].reset();
        $('#cb').append('<li>' +data['fields'].title+ '  ' +data['fields'].body+ '</li>');
    }
    });

    },
    error:function(errData){

    }

})