form 伪造 ajax请求,Ajax--参数,csrf跨站请求伪造,serialize(),上传文件formdata(示例代码)...

https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js.

一:参数,processData,contentType,traditional,dataType

######################------------data---------################

data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式

(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。

function testData() {

$.ajax("/test",{ //此时的data是一个json形式的对象

data:{

a:1,

b:2}

});//?a=1&b=2

######################------------processData---------################

processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，

那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()

,最后得到一个［object，Object］形式的结果。######################------------contentType---------################

contentType：默认值:"application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，

比如contentType:"application/json"，即向服务器发送一个json字符串：

$.ajax("/ajax_get",{

data:JSON.stringify({

a:22,

b:33}),

contentType:"application/json",

type:"POST",

});//{a: 22, b: 33}

注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象######################------------traditional---------################

traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},

traditional为false会对数据进行深层次迭代；

dataType： 预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。

默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换；

比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容

进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式

的对象；转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用

data Type。

dataType的可用值：html｜xml｜json｜text｜script

见下dataType实例

二:csrf跨站请求伪造:

方式一:这个方式只适合在本html里,如果在外面引用js文件就没效果.

$.ajaxSetup({

data: {csrfmiddlewaretoken:\'{{ csrf_token }}\'},

});

这个一定要在ajax前面加,不能在引用ajax之后.

方式二:

$(\'.index\').click(function () {

var ret=$(this).parent().prev().prev().prev().html();

$(this).parent().parent().addClass(\'yet\');

$.ajax({

url:\'/index/\',

type:\'POST\',

data: {

csrfmiddlewaretoken:$("[name=\'csrfmiddlewaretoken\']").val(),

name: ret

},

success: function () {

$(\'.yet\').remove()

}

})

})

在html的body里面,还要再加上一行{%csrf_token%},缺一不可.

方式二用的比较多,在一般情况下用方式二就行,他可以跨html操作,

他的操作是在data里面加上csrf,然后一起传过去.如果方式二还不行那就只能用方式三

View Code

$.ajax({

url:"/get_ajax/",

type:"POST",

headers:{"X-CSRFToken":$.cookie(\'csrftoken\')},

data:{// csrfmiddlewaretoken:$("[name=\'csrfmiddlewaretoken\']").val(),

name:$(":text").val(),

pwd:$(":password").val(),

}

导入后,然后在headers中传入{"X-CSRFToken":$.cookie(\'csrftoken\')}

,别问什么,这是固定格式.

View Code

方式三:

//需要下载对应文件$.ajax({

headers:{"X-CSRFToken":$.cookie(\'csrftoken\')}, })

并且在后面ajax里面要加上:headers:{"X-CSRFToken":$.cookie(\'csrftoken\')}.这是固定格式

三: jQuery.serialize()　　:该函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串.

serialize()函数常用于将表单内容序列化，以便用于AJAX提交。

serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。

serialize()函数常用于将表单内容序列化，以便用于AJAX提交。

该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。

该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在

标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

与常规表单提交不一样的是：常规表单一般会提交带有name的按钮控件，而serialize()函数不会序列化带有name的按钮控件。

jQuery 1.0新增该函数。

语法:

jQueryObject.serialize( )

应用:

$.ajax({

url:\'/new1/\',

type:\'POST\',

data:$("#fm").serialize(),

success:function (data) {

alert(data)

}

})

首先serialize是一定要在form表单中,他可以提交多个数据,但是在form表单中,不能用submit按钮,

如果用了就不会走ajax.

注意:1,一定要在form表单中 2,按钮不能是submit 3,如果是POST请求,在表单中要处理csrf_token.

我们也可以直接对部分表单元素进行序列化。

// 序列化所有的text、select、checkbox表单元素

// 序列化后的结果：username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2

alert( $(":text, select, :checkbox").serialize() );

serialize()函数通常用于将表单内容序列化，以便通过AJAX方式提交。

四:上传文件:

1:用form表单下载文件

html文件:

注意:1,form下载,首先要在form中加上enctype="multipart/form-data",这句话,

这是固定模式2,在input里面type="file",是上传文件格式.

views视图函数里:defget_file(request):if request.method=="post":print(request.POST)print(request.FILES)print(request.FILES.get(\'v1\')

files=request.FILES.get("v1")

with open(files.name,\'wb\') as f:for file infiles.name:

f.write(file)return Httpresponse(\'ok\')return render(request,\'file.html\')#这里是print(request.POST)的结果 :

print(request.FILES)的结果]}>

print(request.FILES.get(\'v1\')的结果day72.txt.

2:formData

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,

我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,

使用FormData的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+

缺点:只支持主流浏览器.

formdata用法:

html里:

姓名

密码

头像

Ajax_send

导入jsquery #导入csrf模块

$(".Ajax_send").click(function () {

var formData=new FormData();

formData.append("username",$(":text").val());

formData.append("password",$(":password").val());

formData.append("avatar",$("#upload_avatar")[0].files[0]);//ajax请求

$.ajax({

url:"/get_ajax/",

type:"POST",

headers:{"X-CSRFToken":$.cookie(\'csrftoken\')}, #这是把csrf传入服务器.

data:formData,

contentType:false,#这一句和下面一句是必须药加上

processData:false, #和上面一句是一起的,

success:function (data) {

var data=JSON.parse(data);

console.log(data);

console.log(typeof data);

})