将 Javascript 数据传递给 Django

Posted 2023-02-24

【中文标题】将 Javascript 数据传递给 Django

【英文标题】：Passing Javascript Data to Django

【发布时间】：2012-11-13 16:49:40

【问题描述】：

我对 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 吗？如果有，怎么做？

【参考方案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(dataalert('OK!');
                );
            clearInterval(interval); 
            return;
            // etc etc

网址：

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

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

【讨论】：

请注意，此 JS 假定使用 jQuery，这在问题中没有证据。

还要注意：这个例子可以在没有 jQuery 的情况下重写，虽然你可能会失去理智。

尼克，谢谢你的回答。当然是一个起点。

两个问题： 1) 使用 jQuery 是唯一可管理的方式吗？你似乎认为是这样的？ 2）有没有关于此类问题的文章或教程？似乎这应该是一个非常普遍的问题，并且有一个简单的解决方案。当然，我可能是错的。 @杰克？无论如何，我现在会研究尼克的建议并尝试解决这个问题。

@BrianF***Crain 如果你想异步发出 http 请求，jQuery 是你最好的选择。如果您不想使用 jquery，我相信 google 中的“xhr”会让您入门。

【参考方案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 的技术来执行此操作。

【讨论】：

非常感谢您的回答。我一直在研究 Ajax（以前不熟悉它）。我将首先尝试同步执行，然后使用 AJAX 异步执行。这可能需要我几天的时间，但之后用结果编辑我的答案。