一、回看上节知识点

1、什么是json字符串?

  轻量级的数据调换格式

2、定时器:关于setTimeout

setTimeout(foo,3000)  #
3000代表3秒,foo表示贰个函数,3秒后进行foo函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .login_error{
            color: red;
        }
    </style>
</head>
<body>

<a href="/get_OK/">点击</a>
<hr>
{% csrf_token %}
<p>姓名<input type="text"></p>
<p>密码<input type="password"></p>
<p><button class="Ajax_send">Ajax_send</button></p>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
    $(".Ajax_send").click(function () {
        function foo() {
             $(".login_error").html("");  //3秒后清空
        }
        //方式一
        $.ajaxSetup({
            data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
        });
        // ajax请求
        $.ajax({
            url:"/get_ajax/",  //请求路径
            type:"POST",      //请求方式
            //吧js对象转成json字符串
            data:{
{#                    方式三#}
{#                 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#}
                 name:$(":text").val(),
                 pwd:$(":password").val()
            },
            success:function (data) {
                var data=JSON.parse(data);  //js中的反序列化
                console.log(data);
                console.log(typeof data);
                if(!data["flag"]){   //为False的情况
                    $(".login_error").html("用户名或者密码错误");
                    setTimeout(foo,3000)
                }
            }
        })
    })
</script>
</body>
</html>

三、ajax的参数补充

   – type不写的话暗中同意是GET

  - dataType和ContentType:

    dataType:
浏览器发给服务器希望回到的多寡类型
。。假如大家明显地钦赐目的项目,就足以行使data Type。

    ContentType:

      请求头里有:浏览器告诉服务器内容的连串

      响应头里也有:服务器响应浏览器的剧情

四、JS和JQuery对象时期的转换

  jQuery对象加[0]就转换到了dom对象
  dom对象加$符就转换来了jquery对象

五、processDate 暗许为True
,预处理;     假如改为False,不做预处理

 

贰、csrf跨站请求伪造

如果把type:”GET”  改为type:”POST”
会报2个Forbidden的错

化解办法有三种:

方式一:

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

措施二:自个儿组装一组键值对  (
推荐)

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

方法叁:自个儿安装头音信

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

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

三、jQuery.serialize()

serialize()函数用于种类化1组表单成分,将表单内容编码为用于提交的字符串

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

该函数主要根据用以提交有效表单控件的name和value,将它们拼接为2个可直接用来表单提交的文本字符串,该字符串已透过正规的UCRUISERL编码处理(字符集编码为UTF-八)。

该函数不会种类化不需求付出的表单控件,那和健康的表单提平安银行为是同等的。例如:不在<form>标签内的表单控件不会被交付、未有name属性的表单控件不会被交给、带有disabled属性的表单控件不会被提交、未有被选中的表单控件不会被交付。

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

语法:

jQueryObject.serialize( )

serialize()函数的再次回到值为String类型,重临将表单成分编码后的可用以表单提交的文本字符串。

请参考下边那段开首HTML代码:

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />
</form>

 对<form>成分进行体系化能够直接类别化个中间的有着表单成分。

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

咱俩也足以向来对部分表单成分进行连串化。

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

示例:

json 1json 2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width">
 7     <title>Title</title>
 8 </head>
 9 <body>
10 <form name="myForm" action="http://www.365mini.com" method="post">
11     <input name="uid" type="hidden" value="1" />
12     <input name="username" type="text" value="张三" />
13     <input name="password" type="text" value="123456" />
14     <select name="grade" id="grade">
15         <option value="1">一年级</option>
16         <option value="2">二年级</option>
17         <option value="3" selected="selected">三年级</option>
18         <option value="4">四年级</option>
19         <option value="5">五年级</option>
20         <option value="6">六年级</option>
21     </select>
22     <input name="sex" type="radio" checked="checked" value="1" />男
23     <input name="sex" type="radio" value="0" />女
24     <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
25     <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
26     <input name="hobby" type="checkbox" value="3" />羽毛球
27     <input name="btn" id="btn" type="button" value="点击" />
28 </form>
29 <script src="/static/jquery-3.2.1.min.js"></script>
30 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
31 <script>
32     $("#btn").click(function () {
33 {#        方式一#}
34         //$.ajaxSetup({
35           // data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
36         //});
37         $.ajax({
38             url:"/serialize/",
39             type:"POST",
40 {#            方式三#}
41             headers:{"X-CSRFToken":$.cookie('csrftoken')},
42             //data:$("form").serialize(),   //序列form表单所有的
43             data:$(":text,:password,:checkbox").serialize(),  //序列自己选择的
44             success:function (data) {
45                 var data=JSON.parse(data);  //js中的反序列化
46                 console.log(data);
47                 console.log(typeof data);
48                 $(".error").html(data);
49             }
50         })
51     })
52 </script>
53 </body>
54 </html>

serialize.html

json 3json 4

1 def serialize(request):
2     # form = request.POST
3     # 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

<form action="/formupload/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>姓名:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="password"></p>
    <p>头像:<input type="file" name="file"></p>
    <p><input type="submit" value="提交"></p>
</form>

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))   #<class 'django.core.files.uploadedfile.InMemoryUploadedFile'>   <class 'str'>
        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
二添加了二个新的接口FormData.利用FormData对象,大家能够透过JavaScript用某个键值对来模拟1连串表单控件,我们还能运用XMLHttpRequest的send()措施来异步的交给那么些”表单”.比起普通的ajax,使用FormData的最大优点正是大家得以异步上传一个2进制文件.

不无主流浏览器的较新本子都早就支撑那几个目的了,比如Chrome
7+、Firefox 四+、IE 十+、Opera 1二+、Safari 5+。

小心:下文中的几个需求解释的

$("#upload") 拿到的是一个集合
$("#upload")[0]  就是一个dom对象
$("#upload")[0].files   拿到的是一个filelist
$("#upload")[0].files[0]  拿到的是当前最近的文件对象 

壹旦使用FormData一定要加上:

肯定要添加:

  contentType:false

  processDate:false
#不做预处理

ajaxupload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<body>
<p>姓名<input type="text" name="username"></p>
<p>头像<input type="file" id="upload"></p>
<p><button class="btnnn">提交</button></p>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
    $(".btnnn").click(function () {
         var formData=new FormData();
        formData.append("username",$(":text").val());
        formData.append("file",$("#upload")[0].files[0]);
        $.ajax({
            url:"/get_upload/",
            type:"POST",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
            data:formData,
            contentType:false,
            processData:false,
            success:function (data) {
                $(".tishi").html("上传成功")
            }

        })
    })
</script>
</body>
</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("上传成功")

 

相关文章

网站地图xml地图