使用 Jquery 和 Ajax 查询 Django 数据库

Posted 2023-05-08

【中文标题】使用 Jquery 和 Ajax 查询 Django 数据库

【英文标题】：Querying Django database with Jquery and Ajax

【发布时间】：2019-08-15 03:02:57

【问题描述】：

我有一个 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

我怎样才能让它只显示我添加的帖子+数据库中的内容而不显示多个相同的帖子？感谢您的帮助。

【参考方案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 方法中使用template literal 可以使事情变得更简洁。

或者您可以只发送您刚刚在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>

【讨论】：

感谢您的回复，我已更改为您建议在 HttpResponse 中发送帖子的内容，但我现在收到 TypeError: 'Post' object is not iterable。我正在使用 - from django.core import serializers 进行序列化。同样适用于@schillingt

查看您正在使用的序列化程序的文档，serialize 将迭代器作为其第二个参数，这就是您看到该错误的原因。如果你看看这个问题***.com/questions/2391002/… 有人建议serialize('json', [post]) 应该可以工作。请记住，您现在将获得一个数组作为响应。

另外，您可能想研究使用 Django Rest Framework 来构建您的 API django-rest-framework.org。

感谢终于让它工作了！使用`post_arr = serializers.serialize('json', [post]) response = post_arr[1:-1]`

【参考方案2】：

您可以让POST 视图返回序列化实例，如下所示。它可能不完全正确，因为我不知道您使用什么进行序列化，但它应该给您一个想法。

如果您不喜欢这样，您可以将帖子的 id 作为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)

    

)

【讨论】：

感谢您的回复，我遇到了与下面所述相同的问题。我现在得到 TypeError: 'Post' object is not iterable。