将 Javascript 数据传递给 Django

Question

我对 Django（和 Web 开发）还很陌生，发现自己正在为这个问题苦苦挣扎：我使用 javascript 构建了一个简单的计时器，现在希望在模型中拥有一个在计时器到时更新的变量。我迷失在如何做到这一点。

这是我的代码：

home.html：

<button onclick='activatecount()' value='countdown'>Start Timer</button>
<p id='countdown'></p>
<p id='endofcount'></p>

<script src='{{ STATIC_URL }}timerapp.js'></script>
</body>
</html>

然后是 javascript。屏幕上有一个按钮，当用户单击该按钮时，计时器开始倒计时。

var myTime = setInterval(displayTime, 1000);//Calls the function displayTime once every second
function subtractSeconds(){
seconds--;
document.getElementById('countdown').innerHTML = seconds; }

var interval;
var minutes = 2;
var seconds = 10;

function activatecount(){
    countdown('countdown');
}

function countdown(element) {
    interval = setInterval(function() {
        var el = document.getElementById(element); 
        if(seconds == 0) { 
            if(minutes == 0) {
                el.innerHTML = "countdown's over!";  
                clearInterval(interval); 
                return;
            } else { 
                minutes--;
                seconds = 60;
            }
        } 
        if(minutes > 0) { 
            var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
        } else {
            var minute_text = '';
        }
        var second_text = seconds > 1 ? 'seconds' : 'second';
        el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
        seconds--; 
        }, 1000); 
}

我的views.py：

def home(request):
    return render_to_response('home.html', context_instance=RequestContext(request))

最后是我的 models.py：

class User(models.Model):
    username = models.CharField(max_length=10)
    email = models.EmailField(max_length=254)
    first_name = models.CharField(max_length = 20)
    last_name = models.CharField(max_length = 20)
    join_date = models.DateField().auto_now_add
    block_count = models.IntegerField()

def __unicode__(self):
    return self.username

我想要的只是当计时器到时 block_count 加一。 （我稍后会添加更多功能，但我完全迷失在这个看似微不足道的事情上。）我能找到的只是关于如何使用表单和 POST 将数据提交到数据库的讨论，但我在这里没有使用表单.

应该在这里使用 POST 吗？如果有，怎么做？

Answer 1

创建第二个视图以更新模型。如果您希望能够在数据库更新时保持在同一页面上，请使用 jquery 的 .ajax 方法调用第二个视图。

类似：

views.py

def ajax(request):
    if request.is_ajax():
    // add 1 to your block count

jquery:

function countdown(element) {
interval = setInterval(function() {
    var el = document.getElementById(element); 
    if(seconds == 0) { 
        if(minutes == 0) {
            el.innerHTML = "countdown's over!";  
              $.ajax({
                type:"POST",
                url :"/ajax-url/",
                error:function(data){alert('Error');}
                success:function(data{alert('OK!');}
                });
            clearInterval(interval); 
            return;
            // etc etc

网址：

url(r'^ajax-url/$', 'views.ajax'),

这是一般的想法。我没有测试过这段代码，但它应该为您提供一个了解如何解决问题的起点。

Answer 2

你可以创建这样的表单

<form name="myform" action="/update-model/ method="post">
<input type="hidden" name="update" value="yes">
</form>

和这样的视图

def update_model(request):
    if request.POST:
        if request.POST['update']:
            #do your code here.

你的 javascript 像这样

    if(minutes == 0) {
            el.innerHTML = "countdown's over!";  
            document.myform.submit();
            clearInterval(interval); 
            return;
        } else { 
            minutes--;
            seconds = 60;
        }

在 Django（以及一般的 Web 应用程序）中，当您需要服务器做某事时，您会向它发送 HTTP 请求。这是通过将方法映射到 url (urls.py) 来完成的。然后你可以做 deprecated for 1.5

url = "{% url my_url_name %}"

对于如何使用 Web 浏览器（您的 Web 应用程序的 GUI，对吗？）发送该请求，您有几种选择

• 异步
• 同步

同步发送请求需要标准页面加载。 Google 的主页表单是同步的。您希望在请求需要将用户移动到另一个页面或应用程序需要在提交后重新启动时执行此操作。您可以通过表单提交和链接来执行此操作。

异步发送请求允许页面的某些部分在不同时间加载（重新加载），因为它们可以由服务器处理。从谷歌搜索结果页面再次搜索异步拉入搜索结果。您可以使用一种称为 ajax 的技术来执行此操作。