Question

我正在尝试构建一个小计分应用程序，以学习如何同时使用Django Rest Framework和Ajax。

我已经全部设置好了API，但是在Ajax前端没有解决。

我要构建的是一个“开始/暂停”按钮来启用计时功能。我有一个调用API的“ duration”字段的Ajax脚本，并且有一个“开始/暂停”按钮，从“开始”变为“暂停”。

我错过了两件事。第一种是在“开始”和“暂停”之间切换的方法。我尝试了Toggle()，但我认为使用错了。

HTML：

<div class="col-4" id="jsonresp">
    <button class="start_match btn btn-success">Start Match </button><h5>
    <lable>Time Left:</lable> <span id="duration"></span></h5>
</div>

script.js：

<script>
$('.start_match').click(function () {
    var url = "{% url 'api:API_Match_Detail' pk=object.id %}";
    console.log(url);
    $.ajax({
        url: url,
        dataType: "json",
        success: function (data) {
            var match = data;
            console.log(match);
            $('#duration').text(data.duration);

            $(".start_match").removeClass('btn-success').addClass('btn-danger');
            $(".start_match").html("Pause Match");  
            // this is where I tried $(".start_match").toggle()
            },
         });
     });
</script>

第二个我找不到更多的信息。我正在尝试使duration字段递减至零并随着时间的流逝更新API，因为我想将该数据提取到与该项目完全分开的另一个项目中。

型号：

class Match(models.Model):
    tournament = models.ForeignKey(Tournament, on_delete=models.PROTECT)
    duration = models.DurationField(default=timedelta(minutes=6))
    more stuff...

因为我想切换按钮并使它执行其他操作，所以我不认为隐藏按钮并显示另一个按钮是最干净的解决方案。

我目前的最佳猜测：

我知道这是不对的，但这大致就是我认为应该以我对Javascript和Ajax的非常有限的知识来工作的方式。

<script>
var url = "{% url 'api:API_Match_Detail' pk=object.id %}";
$.ajax({
    success: function (data) {

        // Set the duration
        url: url 
        $('#duration').text(data.duration);

        // Update the count down every 1 second
        var x = setInterval(function() {

          var time = datetime.timedelta 1 second //I know this isn't right at all 

          var totalTime = duration - time;
          save(x) // I know this isnt right either
          }
    }
    });
)};
</script>

如何使用Ajax将Django的“持续时间字段”转换为倒数计时？

0 个答案: