使用 ajax 和 django 传递信息

Posted

技术标签:

【中文标题】使用 ajax 和 django 传递信息【英文标题】:use of ajax with django for passing information 【发布时间】:2016-03-08 06:03:52 【问题描述】:

我正在尝试通过 django 视图测试 ajax 的使用。我是 ajax 和 django 的新手。我创建了一个 3*3 按钮单元格的网格。当我单击任何按钮时,它会将其文本替换为和“X”,然后应在 ajax 的帮助下将其传递给查看“处理程序”。但在我的情况下,它并没有通过控件来查看“处理程序”。我不明白为什么它不起作用。 这是我的代码:

网址文件:

 from django.conf.urls import include, url
    from django.contrib import admin
    from game import views
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^handler/',views.handler,name='handler'),
        url(r'^$',views.home,name='home'),
    ]

查看文件

from django.shortcuts import render
    from django.http import HttpResponse
    from django.http import Http404

    def handler(request):
        if request.is_ajax():
            pos = request.POST['pos']
            return HttpResponse(2)
        else:
            raise Http404
    def home(request):
        context = 
        return render(request,"game/home.html",context)

home.html 文件:

<head>
<head>
<style>
td 
    padding:0;

table 
    height:240px;
    width:240px;
    border-collapse: collapse;
    border-spacing: 0

input 
    margin:0;
    width:80px;
    height:80px;
    font-size: 50px;
    text-align: center;

#content 
    position:absolute;
    top:210px;
    left:540px;

</style>
<script>
function change(id)

    var y = document.getElementById(id);
    y.value = 'X';
    $.ajax(
        url:"handler/",
        type:"POST",
        data:pos:id,

        success:function(data) 
            var x = document.getElementById(data);
            x.value = 'O';
            console.log("sucess");
        ,
        error:function(xhr,errmsg,err) 
            alert("error");
        
    );

</script>
</head>
<body>
<div id = "content">
<center><table>
<tr>
<td><input type = "button" onclick="change(1)" id = "1"></input></td>
<td><input type = "button" onclick="change(2)" id = "2"></input></td>
<td><input type = "button" onclick="change(3)" id = "3"></input></td>
</tr>
<tr>
<td><input type = "button" onclick="change(4)" id = "4"></input></td>
<td><input type = "button" onclick="change(5)" id = "5"></input></td>
<td><input type = "button" onclick="change(6)" id = "6"></input></td>
</tr>
<tr>
<td><input type = "button" onclick="change(7)" id = "7"></input></td>
<td><input type = "button" onclick="change(8)" id = "8"></input></td>
<td><input type = "button" onclick="change(9)" id = "9"></input></td>
</tr>
</table>
</center>
</div>
</body>
</html>

【问题讨论】:

pos = request.POST['pos'] 下添加print 'Checkpoint'print pos 并让我知道当您激活AJAX 请求时控制台中是否打印任何内容。此外,successerror 函数是否返回 console.log('success')alert("error") 事实上,控制甚至没有传递给您要求打印的“处理程序”视图。 有很多事情可能会出错。我可以看到其中之一是您没有处理 csrf 令牌,这可能会给您 403 响应。你应该打开浏览器的控制台,看看是不是这样。如果是这样,您的 view.py 方法甚至可能不会被调用。 docs.djangoproject.com/en/1.9/ref/csrf @ShangWang 可能是对的,尝试将data:pos:id, 更改为data:pos: id, 'csrfmiddlewaretoken': ' csrf_token ', - 即使这不是主要问题,您也需要这样做。如果有帮助,请告诉我。 我改了,但问题依旧 【参考方案1】:

使用 csrf_exempt 装饰器,因为您不通过 ajax 发送 csrf 令牌。此外,请确保您已将 &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt; 包含到您的模板文件中。应该可以的。

from django.views.decorators.csrf import csrf_exempt
from django.shortcuts import render
from django.http import HttpResponse
from django.http import Http404

@csrf_exempt
def handler(request):
    if request.is_ajax():
        pos = request.POST['pos']
        return HttpResponse(2)
    else:
        raise Http404

【讨论】:

以上是关于使用 ajax 和 django 传递信息的主要内容,如果未能解决你的问题,请参考以下文章

在 Django 中使用 AJAX 更新数据库

Django - 渲染模板并通过 AJAX 传递它们

将信息从 javascript 传递到 django 应用程序并返回

使用 Ajax、Django 将上下文传递到模板中

使用django时如何在ajax调用中传递request.user?

使用 FormData 与 form.serialize() 使用 django 的 ajax 帖子