Question

我想创建一个从1到10但不重新加载页面的页面，每个数字之间有一秒钟。

我一直在阅读并且似乎需要ajax（我对此不熟悉），但是使用听起来很复杂的功能，我只想在我的页面上有一个<div>部分显示那些数字从1到10而不重新加载网页。

任何指南或基本示例都会对我有所帮助！

谢谢！

Answer 1

如果您正在寻找可以帮助您使用后端的新数据替换HTML中的值的内容，请按照以下步骤操作。

<强> xyz_template.html

<html>
    <head></head>
    <body>
        <div class="container">
            {{number}}
        </div>
    </body>
</html>

<强> pqr.js

    var current_number = $(".container").val();
    var c = getCookie('csrftoken');
    (function pullnewnumber(){
        $.ajax({
            context: this,
            type: 'POST',
            dataType: 'json',
            url: '/fetchnewnumber/',
            data: {
                csrfmiddlewaretoken: c,
                input: current_number
            },
            success: function(response) {
                var new_number = response.newNumber;
                $(".container").html(new_number);
            },
            complete: function(){
            setTimeout(pullnewnumber, 1000);
            }
        });
    });

<强> views.py

def sampleView(request):
    if request.POST:
       if request.is_ajax():
          input_num = request.POST.get("input", "")
          if input_num < 10:
             num = input_num + 1
          json_object = {'responseNum': num}
          return JsonResponse(json_object)  
    else:
        num = 1
        return render_to_response('xyz_template.html',
                                 {'newNumber': num},context_instance=RequestContext(request))

Django：无需重新加载即可创建页面

1 个答案: