71、django之Ajax续 - Python

TOP

71、django之Ajax续(二)

2017-11-15 09:15:17 【大中小】浏览:249次

的所有表单元素。

序列化所有：$("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对象,我们可以通过java script用一些键值对来模拟一系列表单控件,我们还可以使用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

首页上一页 1 2 3 下一页尾页 2/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：数据结构--栈的应用	下一篇：学习笔记TF067:TensorFlow Servin..