python Django框架实现自定义表单提交

发表于 5年以前 | 总阅读数：444 次

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

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

一、表单提交
Template：


    <!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:


    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)在

标签内添加{% 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代码


    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：


    <!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：


    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()了


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

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

(3)Get请求不需要以上操作，直接使用$.get()即可
注：本文使用的Django1.8.3版本进行测试。

以上就是本文的全部内容，希望对大家的学习有所帮助。

扫码在手机上访问

为您提供高质量的文档

Android插件化方案 5年以前 | 237270次阅读

前端录屏 + 定位源码，帮你快速定位线上 bug 2年以前 | 27805次阅读

飞书里面给链接生成一个预览是怎么做到的？ 3年以前 | 10482次阅读

vscode超好用的代码书签插件Bookmarks 2年以前 | 8108次阅读

raw.githubusercontent.com被污染的解决办法 5年以前 | 7916次阅读

python Django框架实现自定义表单提交

刘强东夫妇：“移民美国”传言被驳斥

博主曝三大运营商，将集体采购百万台华为Mate60系列

ASML CEO警告：出口管制不是可行做法，不要“逼迫中国大陆创新”

抖音中长视频App青桃更名抖音精选，字节再发力对抗B站

威马CDO：中国每百户家庭仅17户有车

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

苹果据称正引入3D打印技术，用以生产智能手表的钢质底盘

千万级抖音网红秀才账号被封禁

亚马逊股东起诉公司和贝索斯，称其在购买卫星发射服务时忽视了 SpaceX

苹果上线AppsbyApple网站，以推广自家应用程序

特斯拉美国降价引发投资者不满：“这是短期麻醉剂”

光刻机巨头阿斯麦：拿到许可，继续对华出口

马斯克与库克首次隔空合作：为苹果提供卫星服务

𝕏（推特）调整隐私政策，可拿用户发布的信息训练 AI 模型

荣耀CEO谈华为手机回归：替老同事们高兴，对行业也是好事

AI操控无人机能力超越人类冠军

AI生成的蘑菇科普书存在可致命错误

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

国产扫地机器人热销欧洲，国产割草机器人抢占欧洲草坪

罗永浩吐槽iPhone15和14不会有区别，除了序列号变了

python Django框架实现自定义表单提交

登录后可以享受更多权益