首页 > Web开发 > 详细

form表单和ajax发送文件以及ajax发送json字符串

时间:2019-07-22 19:35:16      阅读:80      评论:0      收藏:0      [点我收藏+]

form表单发送文件

form表单默认传送格式contentType为urlencoded 当传送文件的时候我们需要在form表单中 enctype="multipart/form-data"

不然只会发字符串的文件名字放个post中

前端代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>

<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="myfile">
    <input type="submit">
</form>

</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>

后端代码

def index(request):
    if request.method == POST:
        # form表单传送文件需要在前端content_type : enctype="multipart/form-data"
        # form表单默认是urlencoded
        file_obj = request.FILES.get(myfile)
        f = open(file_obj.name, wb)
        for line in file_obj:
            f.write(line)
        return HttpResponse(ok)
    return render(request, text.html)

ajax传送文件

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
{% csrf_token %}
<input type="file" name=‘myfile‘ id="myfile">
<button id="submit">提交</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>


<script>
    $(#submit).click(function () {
        let formDate = new FormData();
        fileObj = $(#myfile)[0].files[0];
        formDate.append(myfile, fileObj);
        formDate.append(username, hkk);
        formDate.append(password, 123);

        $.ajax({
            url: ‘‘,
            type: post,
            {#headers:{"X-csrftoken":$("[name=‘csrfmiddlewaretoken‘]").val()},#}
            data: formDate,
            contentType: false,
            processData: false,
            success: function (data) {
                alert(data)
            }
        })
    })

后端代码

def index1(request):
    if request.method == POST:
        print(request.POST)
        file_obj = request.FILES.get(myfile)
        f = open(file_obj.name, wb)
        for line in file_obj:
            f.write(line)
        return HttpResponse(ok)
    return render(request, text1.html)

 

ajax发送json格式的

需要在ajax中contentTyle:application/json

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
{% csrf_token %}
<button class="btn btn-success" id="my_button">点我</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script>
    $(#my_button).click(function () {
        $.ajax({
            url: ‘‘,
            type: post,
            contentType: application/json,
            {#headers:{"X-csrftoken":$("[name=‘csrfmiddlewaretoken‘]").val()},#}
            data: JSON.stringify({username: hkk, password: 123}),
            success: function (data) {
                alert(data)
            }
        })
    })
</script>
</html>

后端代码

def index2(request):
    if request.method == POST:
        print(request.body)
        dic = json.loads(request.body.decode(utf-8))
        print(dic)
        return HttpResponse(ok)
    return render(request, text2.html)

 

form表单和ajax发送文件以及ajax发送json字符串

原文:https://www.cnblogs.com/huikejie/p/11227766.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!