首页 / 问题 / 正文

将动态JavaScript变量传递给Django/Python

10 投票
1 回答
22624 浏览
提问于 2025-04-18 09:22

我看了很多答案和网站，但没有一个能回答我具体的问题。我有一个网页，上面有“+”和“-”按钮，用来增加一个叫“pieFact”的变量。这个变量需要动态更新，也就是说不需要刷新页面就能改变它的值。每次这个值变化时，都要把它传给我的Django视图。这样我就可以用它来更新网页地图中的饼图大小。我现在有以下代码：

<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方法。

django javascript ajax web开发 饼图 前端交互 动态变量

1 个回答

22

为了避免刷新页面，是的，你需要用到AJAX。虽然我通常不太喜欢在回答中推荐库，但为了确保在不同浏览器上都能顺利使用，我建议你使用jQuery。

用jQuery实现起来非常简单

在你的Django模板中

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

接下来...

你需要通过AJAX把数据发送到服务器，方法是使用POST或GET。为了更符合REST风格，每当我需要发送数据到服务器时，我都会使用POST。jQuery提供了一个方便的函数$.post()，可以通过POST方式把数据发送到指定的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属性中指定onclick是一样的。两个点击事件都会更新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，我就会检查字典request.POST中是否有键'pieFact'。

还记得我在JavaScript中把变量data设置为{'pieFact': pieFact}吗？那个JavaScript对象就变成了请求的request.POST字典。所以，如果我在JavaScript中用的是var data = {'hello': pieFact};，那么我就会检查if 'hello' in request.POST。一旦我看到pieFact在request.POST字典中，我就可以获取它的值，然后进行处理。如果一切顺利，我会返回一个HttpResponse，内容是字符串'success'。这和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!!!!!')

希望这些信息能帮助你找到正确的方向。

回答于 2025-04-18 由 Python大师
分享 举报

撰写回答