微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我看了很多答案和其他网站,但没有人回答我的具体问题.我有一个带“”和“ – ”按钮的网页,它应该增加一个名为“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.

解决方法

为了避免刷新页面,是的,您将需要AJAX.我通常不喜欢在答案中建议库太多,但是,为了便于跨浏览器兼容,我建议使用 jQuery.

使用jQuery就可以了

在你的django模板里面

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

稍后的…

您需要通过AJAX将数据POST或GET到服务器.为了更加RESTful,每当我需要将数据发送到服务器时,我都使用POST. jQuery通过POST为URL提供了AJ001数据的$.post()便利功能.这三个参数是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基本相同.两个click事件都会按预期更新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’在dict request.POST中.

还记得我在javascript中将变量数据设置为{‘pieFact’:pieFact}吗?那个javascript就成了request.POST python字典.所以,如果在javascript中我使用了var data = {‘hello’:pieFact} ;,那么我会在request.POST中检查’hello’是否相反.一旦我看到pieFact在request.POST字典中,我就可以获得它的值,然后用它做一些事情.如果一切都成功,我会返回一个带有’success’字符串的HttpResponse.这与javascript中的检查相关联:if(响应===’成功’).

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!!!!!')

希望这会让你指出正确的方向.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据复制操作的两种方式。‌在聊深浅拷贝之前咱得了解一下js中的两种数据类型:
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:重建二叉树、反向输出链表每个节点 题目 重建二叉树: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列 {1,2,4,7,3,5,6,8} 和中序遍历序列 {
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须了解的知识点,现在迎来了ES6+的时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,所以刚好总结一下JavaScript中this指向的问题。
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高