无法使用Ajax将json显示为html

尼古拉斯·奥古斯丁

我正在为我的帖子实现一个“加载更多”按钮。

使用ajax，这就是我要在HTML中显示已加载帖子的功能：

success:function(res){
                var _html='';
                var json_data=$.parseJSON(res.posts);
                $.each(json_data,function(index,data){
                _html+='<div class="post-box col-md-1">\
                  <div class="info-box mb-4">\
                  <div>\
                    {% if '+data.fields.cantidad+' == 1 %}\
                      <h3>'+data.fields.donador+'</h3><text>te donó '+data.fields.cantidad+' '+data.fields.objeto+'.</text>\
                    {% else %}\
                    <h3>'+data.fields.donador+' </h3><text>te donó '+data.fields.cantidad+' '+data.fields.objeto+'s.</text>\
                    {% endif %}\
                      <br>\
                      <text>'+data.fields.whenpublished+' </text>\
                      {% if '+data.fields.message+' != "" %}\
                      <hr>\
                    <text>'+data.fields.message+'</text>\
                    {% endif %}\
                  </div>\
                  </div>\
              </div>';
                              };

这是我的模型：

class Donacion(models.Model):
    creador_d = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    creation_date = models.DateTimeField(auto_now_add=True, blank=True)
    message = models.CharField(max_length=300, null=True, blank=True)
    donador = models.CharField(max_length=30, null=True, blank=True)
    cantidad = models.IntegerField()
    objeto = models.CharField(max_length=30, null=True, blank=True)

    def whenpublished(self):
        now = timezone.now()
        
        diff = now - self.creation_date

        if diff.days == 0 and diff.seconds >= 0 and diff.seconds < 60:
            seconds= diff.seconds
            
            if seconds == 1:
                return "Hace " + str(seconds) +  " segundo"
            
            else:
                return "Hace " + str(seconds) +  " segundos"

            

        if diff.days == 0 and diff.seconds >= 60 and diff.seconds < 3600:
            minutes= math.floor(diff.seconds/60)

            if minutes == 1:
                return "Hace " + str(minutes) +  " segundo"
            
            else:
                return "Hace " + str(minutes) +  " minutos"



        if diff.days == 0 and diff.seconds >= 3600 and diff.seconds < 86400:
            hours= math.floor(diff.seconds/3600)

            if hours == 1:
                return "Hace " + str(hours) +  " hora"

            else:
                return "Hace " + str(hours) +  " horas"

这里有一些问题。

'+data.fields.whenpublished+'：此值返回undefined，我不知道如何访问它
此条件：{% if '+data.fields.cantidad+' == 1 %}它被解释为False，而'+data.fields.cantidad+'实际上是一个1
这种情况：{% if donacion.message != '' %}即使'+data.fields.message+'==''也被解释为True，在这种情况下，应将其解释为False

为了让您比较此ajax html，我将通过一种GET方法为您提供我通常用于呈现帖子的html ：

     <div class="post-box col-md-1">
          <div>
              <div>
                    {% if donacion.cantidad == 1 %}
                      <h3>{{donacion.donador}} </h3><text>te donó {{donacion.cantidad}} {{donacion.objeto}}.</text>
                    {% else %}
                    <h3>{{donacion.donador}} </h3><text>te donó {{donacion.cantidad}} {{donacion.objeto}}s.</text>
                    {% endif %}
                      <br>
                      <text>{{ donacion.whenpublished }}</text>
                      {% if donacion.message != '' %}
                      <hr>
                    <text>{{donacion.message}}</text>
                    {% endif %}
              </div>
          </div>
      </div>

views.py

def load_more(request):
    offset=int(request.POST['offset'])
    limit=2
    posts=Post.objects.all()[offset:limit+offset]
    totalData=Post.objects.count()
    data={}
    posts_json=serializers.serialize('json',posts)
    return JsonResponse(data={
        'posts':posts_json,
        'totalResult':totalData
    })

NKSM

您whenpublished是您模型的一种方法。

实际上，您不需要使用serializer。

尝试这样做：

def load_more(request):
    offset = int(request.POST['offset'])
    limit = 2
    posts = Post.objects.all()[offset:limit+offset]
    totalData = Post.objects.count()
    posts_data = [{
        'cantidad': post.cantidad,
        'donador': post.donador,
        'whenpublished': post.whenpublished(),
        "message": post.message } for post in posts]
    return JsonResponse(data={
        'posts':posts_data,
        'totalResult':totalData
    })

然后在AJAX成功中，您可以使用res.posts代替var json_data = $.parseJSON(res.posts);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。