【Django】框架ajax无法调用后台方法问题

最新推荐文章于 2022-12-07 10:00:31 发布

原创最新推荐文章于 2022-12-07 10:00:31 发布 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#django #ajax #框架 #ajax请求

Django 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决Ajax无法调用Django后台方法的问题。通过正确配置跨站请求伪造(CSRF)保护，使得Ajax请求能够成功地与Django应用交互。

Ajax 无法访问View中的方法

前段时间在搭建Django 框架时候，遇到了一个问题，就是在 html 页面写的Ajax 无法请求到views中的后台方法？

这是为什么呢？
主要是之前写的java代码的习惯，觉得jsp页面也好，H5界面也好，请求都大同小异。

<script type="text/javascript">
        function init(id,lo) {
            $.ajax({
                url:"/detail/",
                data:{ID:id,load:lo},
                type:'POST',
                success:function(json){
                   var data = $.parseJSON(json);
                    if( data ) {
                        $.each(data, function (key, value) {
                            var st=""
                            for(var i=0;i<value.length-1;i++){
                                 st += value[i]
                                 st +="</br>"
                            }
                           $("#div1").html(st)
                        });
                    }
                }
            });
       }
</script>
<body onload="init('{{ID}}','{{load}}')">
<div id="div1"></div>
</body>

urls.py配置信息

urlpatterns = [
    # url(r'^admin/', admin.site.urls),
    url(r'^show/',views.show),
    url(r'^detail/',views.detail),#之前有人告诉楼主r'^detail$/$' 要加个‘$’说是就能请求到，然并卵
    #
]

最后仔细想想，我们一般请求，前台发送一个请求–>路由拦截–>转发到具体的方法（java也好，Python也好，不过都是这么回事）

想明白这点后，做了如下测试

路由拦截是否配置有问题（http://127.0.0.1:8000/detail/）发现是好的，也进方法了
这就说明了不是我们配置的路由问题
那必然是我们ajax 写法不符合Python 规范
经过查阅资料，发现少了如下代码

<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>(当然不能忘记js)
<script type="text/javascript">
        var csrftoken = $.cookie('csrftoken');

        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
        $.ajaxSetup({  //设置ajax发送之前做的操作，在data里面加上一个键值对
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });
        function init(id,lo) {
            $.ajax({
                url:"/detail/",
                data:{ID:id,load:lo},
                type:'POST',
                success:function(json){
                   var data = $.parseJSON(json);
                    if( data ) {
                        $.each(data, function (key, value) {
                            var st=""
                            for(var i=0;i<value.length-1;i++){
                                 st += value[i]
                                 st +="</br>"
                            }
                           $("#div1").html(st)
                        });
                    }
                }
            });
       }
</script>