ajax使用js动态生成form表单，post方式提交添加crsf验证内容（不用jquery，只用原生js语句）

在项目的setting中
‘django.contrib.auth.middleware.AuthenticationMiddleware’,
取消这一句的注释后，所有post提交的form都需要进行crsf验证，否则报403错误（CSRF验证失败. 请求被中断.）。对于直接渲染的页面，可以在body里加上{% csrf_token %}，即可自动渲染。
但是对于使用javascrip动态创建表单生成，如何解决？
网上搜出来的解决方案基本都是基于jquery的，由于没学过jquery，走了很多弯路，最终我的方法是只使用原生js实现如下（有机会我还是要学一下jquery）：

1、{% csrf_token %}的实质：

     通过查看渲染后的页面的源代码，可以发现，在生成的页面中{% csrf_token %}变成了：

<input type="hidden" name="csrfmiddlewaretoken" value="FpbuglQU28OlxiyxqUCPvmK6vZRNteN6bQ875zGyPh5ZgncodkKOKy3mML7TjPHj">

其中的value是动态生成的，服务器通过验证value的值实现csrf验证，实质是一个name为"csrfmiddlewaretoken" 的隐藏的input，知道这个就好办了，我们可以通过js提交表单前抓取这个控件的值，然后和data一并提交即可通过验证。

2、实现：

作为一个萌新，我的ajax动态提交表单采用了两种写法：

写法1：

var f = document.createElement('form');   //动态创建一个表单
f.style.display = 'none';
f.action = '/techapp/slurrytestplan/';
f.method = 'post';
f.target = '_blank';  //在新窗口打开
var str="<input type=\"hidden\" name=\"csrfmiddlewaretoken\" value=\""+document.getElementsByName('csrfmiddlewaretoken')[0].value+"\">";
str += '<td><input type="hidden" name="n_w_name" value="' + n_w_name + '"/></td>';      
f.innerHTML = str;     
document.body.appendChild(f);
f.submit(); //提交动态创建的表单到后端，后端用reque.POST.get()获取内容，实现传参

这种写法简单粗暴，直接用html语言写一个form提交，因此直接写了一个全套的csrf控件，值通过读取所调用页面的csrf的值，经测算成功。

写法2 ：

var fd = new FormData();
var wellname = document.getElementById('searchwitchwellname').value;
fd.append('csrfmiddlewaretoken',document.getElementsByName('csrfmiddlewaretoken')[0].value);
fd.append('searchedwellname', wellname);
var xhr = new XMLHttpRequest();
xhr.open('post', '/techapp/searchdesigndata/');
xhr.send(fd);  /* 通过send函数将数据发给服务器 */

这种写法通过append方法给表单添加数据，因此使用字典的方式增加了’csrfmiddlewaretoken’和他的值document.getElementsByName(‘csrfmiddlewaretoken’)[0].value，经测试此方法也成功通过验证。