博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax补充--------FormData等...
阅读量:6277 次
发布时间:2019-06-22

本文共 4939 字,大约阅读时间需要 16 分钟。

一、回顾上节知识点

1、什么是json字符串?

  轻量级的数据交换格式

2、定时器:关于setTimeout

setTimeout(foo,3000)  # 3000表示3秒,foo表示一个函数,3秒后执行foo函数

    
Title 点击

{
% csrf_token %}

姓名

密码

3、ajax的参数补充

   - type不写的话默认是GET

  - dataType和ContentType:

    dataType: 浏览器发给服务器希望返回的数据类型 。。如果我们明确地指定目标类型,就可以使用data Type。

    ContentType:

      请求头里有:浏览器告诉服务器内容的类型
      响应头里也有:服务器响应浏览器的内容

4、JS和JQuery对象之间的转换

  jQuery对象加[0]就转换成了dom对象

  dom对象加$符就转换成了jquery对象

5、processDate 默认为True ,预处理;     如果改为False,不做预处理

 

二、csrf跨站请求伪造

如果把type:"GET"  改为type:"POST" 会报一个Forbidden的错

解决办法有三种:

方式一:

$.ajaxSetup({            data:{csrfmiddlewaretoken:'{
{ csrf_token }}'} }); 注意:要放在ajax请求的前面,在发送之前组装一组字符串,在第一步render的时候就发了 所以有局限性: 如果把JS代码放到静态文件中,不会渲染,不会执行{
{csrf_token}},只能在HTML页面中使用

方式二:自己组装一组键值对  ( 推荐)

{% csrf_token %}
data:{ csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), name:$(":text").val(), pwd:$(":password").val() },

方式三:自己设置头信息

  $.ajax({            url:"/serialize/",            type:"POST",            headers:{
"X-CSRFToken":$.cookie('csrftoken')}, })

三、jQuery.serialize()

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

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

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

该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交没有name属性的表单控件不会被提交带有disabled属性的表单控件不会被提交没有被选中的表单控件不会被提交。

与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,而serialize()函数不会序列化带有name的按钮控件。更多详情请点击这里。

语法:

jQueryObject.serialize( )

serialize()函数的返回值为String类型,返回将表单元素编码后的可用于表单提交的文本字符串。

请参考下面这段初始HTML代码:

游泳
跑步
羽毛球

 对<form>元素进行序列化可以直接序列化其内部的所有表单元素。

// 序列化
内的所有表单元素// 序列化后的结果:uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2alert( $("form").serialize() );

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

// 序列化所有的text、select、checkbox表单元素// 序列化后的结果:username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2alert( $(":text, select, :checkbox").serialize() );

示例:

1  2  3  4     
5
6
7 Title 8 9 10
11
12
13
14
22
男23
女24
游泳25
跑步26
羽毛球27
28
29 30 31 53 54
serialize.html
1 def serialize(request):2     # form = request.POST3     # print(form)4     name = request.POST.get("username")5     password = request.POST.get("password")6     checked = request.POST.getlist("hobby")7     print(name,password,checked)8     return HttpResponse(json.dumps(name))
views.py
当有好多input的时候,就得一一对应的吧所有的数据发过去的,这样显得麻烦,我们用序列化jQuery.serialize()data:$("form").serialize(),   //序列form表单所有的data:$(":text,:password,:checkbox").serialize(),  //序列自己选择的在服务端获取数据form = request.POST   print(form)   #获取所有name = request.POST.get("username")password = request.POST.get("password")checked = request.POST.getlist("hobby")print(name,password,checked)#获取单个

四、上传文件

1、Form表单上传文件

文件和其他的数据类型不一样,是一个二进制的形式

Form上传文件的时候切记要加上:enctype="multipart/form-data"

formupload.html

{% csrf_token %}

姓名:

密码:

头像:

view.py

def formupload(request):    if request.method == "POST":        username = request.POST.get("username")        password = request.POST.get("password")        # file = request.FILES   #拿到的是一个句柄        file_obj = request.FILES.get("file")        print(file_obj,file_obj.name)        print(type(file_obj),type(file_obj.name))   #
with open(file_obj.name,"wb") as f: for i in file_obj: f.write(i) return HttpResponse("上传成功...") return render(request,"formupload.html")

2、Ajax上传文件(利用FormData):既可以处理二进制,又可以处理字典,列表啊等

FormData是什么呢?

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
注意:下文中的几个需要解释的
$("#upload") 拿到的是一个集合$("#upload")[0]  就是一个dom对象$("#upload")[0].files   拿到的是一个filelist$("#upload")[0].files[0]  拿到的是当前最近的文件对象

要是使用FormData一定要加上:

一定要加上:

  contentType:false

  processDate:false #不做预处理

ajaxupload.html

    
Title

姓名

头像

 view.py

def ajaxupload(request):    return render(request,"ajaxupload.html")def get_upload(request):    if request.method == "POST":        print("FIFLE", request.FILES)        file_obj = request.FILES.get("file")        print(file_obj.name, "-----")        file_obj = request.FILES.get("file")        with open(file_obj.name, "wb") as f:            for i in file_obj:                f.write(i)        return HttpResponse("上传成功")

 

转载地址:http://dmyva.baihongyu.com/

你可能感兴趣的文章
亲近自然的加州玻璃豪宅
查看>>
windows7基本操作学习笔记
查看>>
创建第一个IOS项目
查看>>
java表达式类型自动提升
查看>>
小学生家庭教育与学习心理
查看>>
程序员如何优雅地使用 Mac? - OS X - 知乎
查看>>
Centos下安装MongoDB复制集
查看>>
此情可待成追忆
查看>>
Eclipse安装SVN教程
查看>>
Microsoft MSDN Windows 8 各版本下载
查看>>
Vlan中的 PVID vid tag untag 常识理论
查看>>
Query采用each方法遍历
查看>>
地理位置查询
查看>>
Linux 下ntpdate网络校时使用
查看>>
7.1 函数的一般形式
查看>>
C++ - const 与 迭代器(iterator) 使用 详解
查看>>
IOS添加KeyMob广告管理库中文教程
查看>>
Android - HttpURLConnection 抛出异常
查看>>
nginx实现web负载均衡
查看>>
折线图曲线图
查看>>