将动态 Javascript 变量传递给 Django/Python答案

【问题标题】：Pass Dynamic Javascript Variable to Django/Python将动态 Javascript 变量传递给 Django/Python
【发布时间】：2014-07-31 21:22:30
【问题描述】：

我查看了许多答案和其他网站，但没有一个回答我的具体问题。我有一个带有“+”和“-”按钮的网页，它应该增加一个名为“pieFact”的变量。此变量必须动态更新，而无需刷新页面。每次更改值时，它都应该传递给我的 Django 视图。这将用于更新 web 地图中饼图的大小。我有以下内容：

<button type="button" id=bttnMinus onclick="pieFact=pieFact*0.9">-</button>
<button type="button" id=bttnPlus onclick="pieFact=pieFact*1.1">+</button></td> 
<script type="text.javascript">
    var pieFact=0;
</script>

如何将“pieFact”的值传递给 Django？基于我有限的知识，我想我可能不得不使用 AJAX post/get。

【问题讨论】：

标签： javascript jquery python ajax django

【解决方案1】：

为了避免刷新页面，是的，您需要 AJAX。我通常不喜欢在答案中过多地建议库，但是，为了易于跨浏览器兼容，我建议使用jQuery。

使用 jQuery 就这么简单

在你的 django 模板中

<html>
    ...
    <head>
        <script>
            var URL = "{% url 'my_view_that_updates_pieFact' %}";
        </script>
    </head>
...

稍后...

您需要通过 AJAX 将数据 POST 或 GET 到服务器。为了更加 RESTful，每当我需要向服务器发送数据时，我都会使用 POST。 jQuery 提供了$.post() 便利函数，通过 POST 将 AJAX 数据发送到 url。这三个参数是 URL、要发送的数据（作为 JavaScript 对象；如果您对 JavaScript 不太熟悉，请考虑 Python 字典）以及服务器发送回响应后的回调函数。

<script>
function updatePieFact(){
    var data = {'pieFact': pieFact};
    $.post(URL, data, function(response){
        if(response === 'success'){ alert('Yay!'); }
        else{ alert('Error! :('); }
    });
}

.click() 函数与在 html 属性中指定 onlick 基本相同。两个点击事件都会按照您的预期更新pieFact，然后调用updatePieFact() 将pieFact 的值发送到服务器。

$(document).ready(function(){
    $('#bttnMinus').click(function(){
        pieFact *= 0.9;
        updatePieFact();
    });
    $('#bttnPlus').click(function(){
        pieFact *= 1.1;
        updatePieFact();
    });
});
</script>

在views.py中

由于我在 JavaScript 中使用了$.post() 函数，Django 将要接收的请求将具有"POST" 的方法，因此我检查以确保该方法确实是POST （这意味着如果有人通过 GET 请求访问此视图的 URL，他们将不会更新任何内容）。一旦我看到请求实际上是一个POST，我就会检查密钥'pieFact' 是否在字典request.POST 中。

还记得我在javascript中将变量data设置为{'pieFact': pieFact}吗？那个 javascript 就变成了 request.POST python 字典。因此，如果在 javascript 中我改用 var data = {'hello': pieFact};，那么我将改为检查 if 'hello' in request.POST。一旦我看到 pieFact 在 request.POST 字典中，我就可以获取它的值，然后用它做一些事情。如果一切顺利，我会返回一个带有字符串'success' 的HttpResponse。这与 javascript 中的检查相关：if(response === 'success')。

def my_view_that_updates_pieFact(request):
    if request.method == 'POST':
        if 'pieFact' in request.POST:
            pieFact = request.POST['pieFact']
            # doSomething with pieFact here...
            return HttpResponse('success') # if everything is OK
    # nothing went well
    return HttpRepsonse('FAIL!!!!!')

希望这会让你找到正确的方向。

【讨论】：

谢谢。这非常有帮助！检查失败：“如果 request.POST 中的'pieFact'：”。 'pieFact' 似乎在数据中，所以我不确定它为什么会出错。
出于调试目的，您可以print request.POST 查看POST 字典中的是。此外，请检查浏览器上的控制台或网络日志，以查看浏览器向服务器发送的内容。
我在页面上有一个按钮，它提交一个html表单。在我单击该按钮之前，没有任何内容显示为已发布。我所有的其他变量都显示在表单列表中，但“pieFact”除外。当我按下“减号”或“加号”按钮时，似乎什么也没发生。
jQuery 配置正确，我的 url 对 $.post 正常工作。
只是为了确保您上面的按钮 ID 显示时不带引号，它们是否在实际的 html 中被引用？您可以为您的 html 和 javascript 创建一个 jsfiddle 吗？