一、回顾上节知识点

1、什么是json字符串？

　　轻量级的数据交换格式

2、定时器：关于setTimeout

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

    
          
          
              点击
      
{
    % csrf_token %}
姓名
密码
Ajax_send

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      8  9 10 
       
        11     
        12     
        13     
        14     
        15         一年级16         二年级17         三年级18         四年级19         五年级20         六年级21     22     
        男23     
        女24     
        游泳25     
        跑步26     
        羽毛球27     
        28 
       
29 30 31 53 54 

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

当有好多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

    
          
          
          
姓名
头像
提交

 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("上传成功")