71django之Ajax续

Posted 布吉岛丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了71django之Ajax续相关的知识,希望对你有一定的参考价值。

接上篇随笔。继续介绍ajax的使用。

上篇友情连接:http://www.cnblogs.com/liluning/p/7831169.html

 

本篇导航:

 

一、Ajax响应参数

上篇最后介绍了ajax的请求参数现在补充一个响应参数

dataType:  
预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后,传递给回调函数。 默认不需要显性指定这个属性,
ajax会根据服务器返回的content Type来进行转换; 比如我们的服务器响应的content Type为json格式,这时ajax
方法就会对响应的内容进行一个json格式的转换,if转换成功,我们在success的回调函数里就会得到一个json格式的对
象;转换失败就会触发error这个回调函数。如果我们明确地指定目标类型,就可以使用 data Type。dataType的可用
值:html|xml|json|text|script

简单说就是告诉服务器需要返回什么数据类型


 

二、csrf 跨站请求伪造

我们之前用form表单POST提交时如果没有{% csrf_token %}客户端收不到数据会报错同样用ajax POST提交数据也有同样的错误那么准么解决呢?

1、方法一

$.ajaxSetup({
    data: {csrfmiddlewaretoken: \'{{ csrf_token }}\' },
});

$.ajax({
   ... 
})

缺点:当js与html文件分离时,{{ csrf_token }} 无法被渲染失去作用,用方法一必须将js和html写在一起

2、方法二

{% csrf_token %}

$.ajax({
    url:"",
    type:"POST",
    data:{
        csrfmiddlewaretoken:$("[name=\'csrfmiddlewaretoken\']").val(),  
    }
})

缺点:html body标签中必须存在{% csrf_token %}

3、方法三

//<script src="{% static \'js/jquery.cookie.js\' %}"></script> 需要下载对应文件
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

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

缺点:基本通用哈哈哈


 

三、jQuery.serialize()

serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串serialize()函数常用于将表单内容序列化,以便用于AJAX提交。该函数主要根据用于提交有效表单控件的name和value,将它们拼接为一个可直接用于表单提交的文本字符串,该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

简单总结:就是说我们如果有很多input标签内容需要提交总不会全部写在data中罗列出来吧,这就用到serialize()函数了可以帮我们一次性提交数据到客户端。

例如:

<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").serialize()

uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2 

部分序列化:$(":text, select, :checkbox").serialize()

username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2

view视图函数如何取值呢?和以前的POST请求相同

request.POST.get("name")  //input中的name属性

 

四、上传文件

1、普通上传文件

1)template

<form action="/upload/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>用户名<input type="text" name="user"></p>
    <p>头像<input type="file" name="avatar"></p>
    <input type="submit">
</form>

enctype属性不可缺少

2)view

def upload(request):
    if request.method=="POST":
        print("POST", request.POST)
        print("FILES",request.FILES)  # FILES <MultiValueDict: {}>

        file_obj=request.FILES.get("avatar")
        print(file_obj.name,"-----")
        with open(file_obj.name,"wb") as f:
            for i in file_obj:
                f.write(i)
        return HttpResponse("成功")
    return render(request,"upload.html")

这是将上传的文件写入到本地file_obj的name方法可以取到文件名称

3、Ajax(FormData)

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过javascript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

1)template

<body>
<form action="" id="s1">
    <p>姓名<input type="text"></p>
    <p>密码<input type="password"></p>
    <p>头像<input type="file" id="upload_avatar"></p>
</form>
<p><button class="Ajax_send">提交</button><span class="login_error"></span></p>

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

<script>
     function foo() {
        $(".login_error").html("")
    }
    $(".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({
            url:"/get_ajax/",
            type:"POST",
            headers:{"X-CSRFToken":$.cookie(\'csrftoken\')},
            data:formData,
            contentType:false,
            processData:false,
            success:function (data) {
                var data=JSON.parse(data);
                if(!data["flag"]){
                    $(".login_error").html("用户名或者密码错误")
                    setTimeout(foo,3000)
                }
            }
        })
    })
</script>
</body>
View Code

2)view

def get_ajax(request):
    username=request.POST.get("username")
    password=request.POST.get("password")
    print("FIFLE",request.FILES)
    print("POST",request.POST)
    response={"flag":False}
    if username=="bjd" and password=="123":
        response["flag"]=True
    import json
    return HttpResponse(json.dumps(response))

 

以上是关于71django之Ajax续的主要内容,如果未能解决你的问题,请参考以下文章

django-模型层之ajax续批量插入分页器

Django之model操作(续)

5Python全栈之路系列之Django模型续

71Django之form表单

前端面试题之手写promise

django之Form组件--ajax提交