原文网址:http://www.cnblogs.com/retop/p/4677148.html

注：本人使用的Django1.8.3版本进行测试

除了使用Django内置表单，有时往往我们需要自定义表单。对于自定义表单Post方式提交往往会带来由CSRF(跨站请求伪造)产生的错误"CSRF verification failed. Request aborted."

本篇博客只要针对"表单提交"和"Ajax提交"两种方式来解决CSRF带来的错误

一、表单提交

Template：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算数字和</title>
</head>
<body>
    <form method="post" action="{%url 'Calculate' %}">
        {% csrf_token %}
        <label for="A"><input id="A" name="ValueA" type="text"></label>
        <label for="B"><input id="B" name="ValueB" type="text"></label>
        <input type="submit" value="开始计算">
    </form>
</body>
</html>

Views.py:

1
2
3
4
5
6
7
8
def Calculate(request):
    if request.POST:
        a=request.POST["ValueA"]
        b=request.POST["ValueB"]
        c=str(int(a)+int(b))
        return  render_to_response('Result.html',{'result':c})
    else:
        return render_to_response('Calculation.html',context_instance=RequestContext(request))

需要注意：

　　(1)在<form>标签内添加{% csrf_token %},这样在表单提交的过程中，会产生"csrfmiddlewaretoken"标识去防止CSRF

　　(2)在Get请求页面时，需要添加context_instance=RequestContext(request) ,它和{% csrf_token %}配合使用，缺少一个都会出现上述错误,RequestContext 需要在 django.shortcuts 导入

　　(3)只有当表单以Post方式提交时，才需要验证CSRF，Get方式是不需要的

二、Ajax提交

同比与表单提交，Ajax提交需要进行额外的操作，Ajax提交时需要自己提供"csrfmiddlewaretoken"标识参数。我们除了需要引入JQuery外还需要引入一段JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
jQuery(document).ajaxSend(function(event, xhr, settings) {
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    function sameOrigin(url) {
        // url could be relative or scheme relative or absolute
        var host = document.location.host; // host + port
        var protocol = document.location.protocol;
        var sr_origin = '//' + host;
        var origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }
    function safeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
   
    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});

Template：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax 提交</title>
    <script type="text/javascript" src="/static/jquery.js"></script>
    <script type="text/javascript">
        jQuery(document).ajaxSend(function(event, xhr, settings) {
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    function sameOrigin(url) {
        // url could be relative or scheme relative or absolute
        var host = document.location.host; // host + port
        var protocol = document.location.protocol;
        var sr_origin = '//' + host;
        var origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }
    function safeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
  
    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});
    </script>
    <script type="text/javascript">
        $(function(){
             $.ajaxSetup({
                    data:{csrfmiddlewaretoken: '{{ csrf_token }}'}
                });
                $("#Comment").click(function(){
                    $.post('{% url 'AjaxRequest' %}',{"a":$("#A").val(),"b":$("#B").val()},function(data){
                       $("#result").html(data);
                    });
                });
        });
    </script>
</head>
<body>
    <label for="A"><input id="A" name="ValueA" type="text"></label>
    <label for="B"><input id="B" name="ValueB" type="text"></label>
    <input type="button" id="Comment" value="开始计算">
    <h1>计算的结果为：<span id="result"></span></h1>
</body>
</html>

View.py：

1
2
3
4
5
6
7
8
def AjaxRequest(request):
    if request.POST:
        a =request.POST["a"]
        b=request.POST["b"]
        c=int(a)+int(b)
        return JsonResponse(c,safe=False)
    else:
        return render_to_response('AjaxDemo.html',context_instance=RequestContext(request))

需要注意：

　　(1)在使用引入的JS代码后，需要添加如下代码，这样JS就可以自动帮我们生成"csrfmiddlewaretoken"标识,接下来你就可以使用$.post()了

1
2
3
$.ajaxSetup({
                   data:{csrfmiddlewaretoken: '{{ csrf_token }}'}
               });

　　(2)context_instance=RequestContext(request) 并不是必须的

　　(3)Get请求不需要以上操作，直接使用$.get()即可

总结：本人学习Django的时间不长，写博客的目的只要是为了自己做知识记录和对知识的分享，如果哪里写的不好，还请广大博友指点，多多包涵。

[转]django自定义表单提交的更多相关文章

  1. phpcms v9自定义表单提交后返回上一页实现方法

    PHPcms v9中提交自定义表单后默认都是回到首页的,是不是感觉很不爽! 接下来,就说下phpcms v9自定义表单提交后返回上一页实现方法. 1.找到这个文件 phpcms\modules\for ...

  2. DedeCMS实现自定义表单提交后发送指定QQ邮箱法

    https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_3_dg&wd=dedecms 邮箱&oq=d ...

  3. dedecms自定义表单提交成功后提示信息修改和跳转链接修改

    我们在用dedecms自定义表单提交成功后提示信息一般是"Dedecms 提示信息",这个要怎么改成自己想要的文字呢?还有就是提示页停留时间,目前估计就2秒,太快了,要如何设置长点 ...

  4. DedeCMS实现自定义表单提交后发送指定QQ邮箱的方法

    如月cruyue在做DedeCMS自定义表单发送邮箱的教程,发现大部分都是在php文件里写死固定字段内容,这样虽然也能实现自定义表单提交后发送指定邮箱,但是很不智能,如月cruyue想要一个我们自定义 ...

  5. Django初体验（一）:自定义表单提交

    注:本人使用的Django1.8.3版本进行测试 除了使用Django内置表单,有时往往我们需要自定义表单.对于自定义表单Post方式提交往往会带来由CSRF(跨站请求伪造)产生的错误"CS ...

  6. DEDECMS自定义表单提交后的跳转链接修改方法

    dedecms自定义表单,点击提交后,默认跳转到首页,我们打开plus/diy.php,里面有这样一段代码: 代码如下:if($dsql->executenonequery($query)) { ...

  7. 织梦DedeCMS自定义表单提交成功后返回当前页面的教程

    织梦的自定义表单制作的留言,报名等功能,提交成功后会自动返回到首页,那么如何让它返回到当前页面呢? 方法如下: 打开plus/diy.php文件 找到 showmsg($bkmsg, $goto); ...

  8. dedecms自定义表单提交获取时间跟ip地址

    相信大家在用织梦做网站的时候都用过自定义表单做留言,但是如何查看客户什么时间填写的表单,和客户的IP地址呢? 我在网上找了很多JS文件,但太繁琐了,后来我注意到一个细节,每次我登陆后台,织梦系统都会记 ...

  9. JS自定义表单提交处理方案

    JS自定义数据提交处理方案 问题 在Ajax技术流行的今天,我遇到了一个很头疼的问题,我需要维护一个前人开发的问题单模块功能,并且不停的迭代开发,而这个问题就是问题单字段特别多,而且除了更新问题单外, ...

随机推荐

  1. 前端必须了解的布局常识：普通流（normal flow）

    目录 一.概述 二.块级元素和内联元素 常见的块级元素 BFC 常见的行内元素 IFC 三.哪些情况会脱离普通流 浮动 绝对定位 固定定位 display:none 四.总结 五.参考资料 一.概述 ...

  2. ASP.NET MVC使用Areas后怎样获取Area（区域）的名称

    写此随笔,目的只为今后在ASP.NET MVC项目中再用到Area(区域)时作为备查. 获取当前Area(区域)名称的方法是: ViewContext.RouteData.DataTokens[&qu ...

  3. C++实现邮件群发的方法

    这篇文章主要介绍了C++实现邮件群发的方法,较为详细的分析了邮件发送的原理与C++相关实现技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了C++实现邮件群发的方法.分享给大家供大家参考.具 ...

  4. Artificial intelligence(AI)

    ORM: https://github.com/sunkaixuan/SqlSugar 微软DEMO: https://github.com/Microsoft/BotBuilder 注册KEY:ht ...

  5. svn提交时出现很多乱文件怎么解决

    在我们开发项目中的时候经常使用到svn,有时候我们commit的时候回出现很多无用的文件,这些文件就是未版本化的文件,怎么解决这些乱文件的问题呢? svn commit提交的时候有个"sho ...

  6. Python默认版本修改

    Python默认版本修改 当电脑安装了多个版本的Python,而Shell中默认的Python不是你想要的,这个时候就需要对Python的默认版本进行修改. 在Windows中,可以通过修改环境变量的 ...

  7. 编译android 4.4.2

    1.获取Android源码 (1)下载repo 在用户目录下创建一个bin文件夹来存放repo,并把该路径设置到环境变量中 mkdir ~/bin PATH=~/bin:$PATH 下载repo脚本 ...

  8. 分享15个优秀的 CSS 解决方案和工具

    CSS 代码是很难管理,尤其是在大型项目. 样式都写在一个全局作用域里,通过复杂的选择器来指向特定的页面元素.冗余.膨胀和维护可以成为前端开发人员的一场噩梦.幸运的是我们有一些 CSS 工具来帮助开发 ...

  9. 取出session中的所有属性与值的方法

    如果你想取出session中所有的属性和值,可以通过getAttributeNames()方法来实现,具体代码如下 //获取session HttpSession session = request. ...

  10. js 数组去重(7种)

    第一次写技术博客,之前总是认为写这些会很浪费时间,还不如多看几篇技术博文.但...但昨天不知道受了什么刺激,好像有什么在驱使着自己要写一样,所以才有了今天的第一篇博文.总觉得应该要坚持这样写下去.初次 ...