使用AJAX刷新下面的简单div的最佳方法是什么?

时间:2017-12-19 05:09:13

标签: jquery ajax django

我无法通过AJAX从数据库更新中生成显示值的实时元素。

这个应用,应该取一个数字,加1,保存新值并显示更新的值,直播给用户。它是一个基于AJAX的简单计数器。

目标:我需要获取{{number_post}}号码,以反映数据库中最近更改的值,实时,而无需刷新整个页面。

这样做的最佳方式是什么?

Views.py:

    from django.shortcuts import render, redirect
    from django.http import HttpResponse
    from django.template import Context, loader
    from home.models import DeathNum
    import datetime
    import time






    def index(request):
            counter = DeathNum.objects.get(pk=1)
            return render(request,
                         'home/basenum.html',
                          {'number_post': str(counter.deaths)}
                          )

    def counterf(repeat):
        while True:
            time.sleep(5)
            counter = DeathNum.objects.get(pk=1)
            counter.deaths += 1
            counter.save()
            print('Added @ %s ' % datetime.datetime.utcnow())
            time.sleep(5)
        return redirect(index)

basenum.html:

    {% extends "home/index.html" %}
    {% block content %}
     <br />
      <div class="banner">
       <div class="bannerNum">
          <p div class="numberOf">
              Number of deaths in Blank since 1999:
         </p id="number1">
            <br /><br /><br />
           <a href="http://127.0.0.1:8000/counter"><p id="h2s">Please 
   click here to see the live counter...</h2></a>
            <br />
            <br />
            <br />
    <div class="death-div">
  <p class="death1">
     {{ number_post }}
    </p>
    </div>
</div>
      </div>
    {% endblock %}

models.py

     from django.db import models

     # Create your models here.
     class DeathNum(models.Model):

         deaths = models.IntegerField()


         def __str__(self):
             return "{0}/{1}\n".format(self.id, self.deaths)

1 个答案:

答案 0 :(得分:1)

我对django不太了解,但对于ajax和jquery,我想到了解决方案: 对于ajax,如果您将服务称为“发布”,我们有:

$.ajax({
  type: "POST",
  url: "Your service's URL",
  data: "Your enteries, you can make an object for that",
  success: function(result){
      $('.death1').html(result);
    },
error:function(){
alert('error has occured');
}
    });

<强>更新

正如user @ 31piy所述,Ajax语法已经更新,并且不推荐使用“成功”和“错误”,尽管您仍然可以使用它们,但最好更改我们的代码:

$.ajax({ cache: false,
  type: "POST",
  url: "Your service's URL",
  data: "Your enteries, you can make an object for that",

}).done(function (result) {

    $('.death1').html(result);

}).fail(function(event) {

    alert(event.status);

});

关于ajax成功,我们将结果作为一个条目,可以是字符串或对象(您可以在成功部分修改服务的返回数据);

无论何时调用此函数,它都会调用您的服务并更新具有“death1”类的DOM。

如果您的服务使用GET,您应该将类​​型更改为GET而不是数据,您应该通过查询字符串传递参数。 希望它会对你有所帮助。