Ajax&三种上传文件的方式(XHR方式上传文件，jQuery方式上传文件，iframe方式上传文件)

xone

 

原生ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="Ajax" onclick="Ajax1();">

<script>
    function Ajax1() {
        var xhr = new XMLHttpRequest();
        xhr.open(\'POST\',\'/ajax_json/\',true);
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                // 接收完毕
                var obj = JSON.parse(xhr.responseText);
                console.log(obj);
            }
        };
        xhr.setRequestHeader(\'k1\',\'v1\');
        xhr.setRequestHeader(\'Content-Type\', \'application/x-www-form-urlencoded; charset-UTF-8\');    #原生ajax要设置请求头才能发送数据
        xhr.send(\'name=root;pwd=123\');
    }
</script>

</body>
</html>

“伪”Ajax

由于HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" name="email">
<form action="/ajax_json/" method="POST" target="ifm1">
    <iframe name="ifm1"></iframe>
    <input type="text" name="user">
    <input type="text" name="email">
    <input type="submit" value="iframe">
</form>

</body>
</html>

视图函数

def ajax_json(request):

    ret = {
        \'status\':True,
        \'data\': None,
    }
    import json
    print(request.POST)
    return HttpResponse(json.dumps(ret),status=404,reason=\'Not Found\')  # status是返回的状态码，reason是返回的状态信息。

实例二：

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" name="email">
<form action="/ajax_json/" method="POST" target="ifm1">
    <iframe id="ifm1" name="ifm1"></iframe>
    <input type="text" name="user">
    <input type="text" name="email">
    <input id=\'submit\' type="submit" value="iframe">
</form>

    $(\'#submit\').click(function () {
        $(\'#ifm1\').load(function () {　　# 当页面加载完成后执行
            var text = $(this).contents().find(\'body\').text();　　# 获取iframe中的内容（即服务器端返回的数据）
            var obj = JSON.parse(text);
            console.log(obj)
        })
    })

</script>

</body>
</html>

 

视图函数

def ajax_json(request):

    ret = {
        \'status\':True,
        \'data\': None,
    }
    import json
    print(request.POST)
    return HttpResponse(json.dumps(ret))

 

jQuery的Ajax

        $.ajax({
            url: \'/host\',
            type: "POST",
            data: {\'k1\': 123,\'k2\': "root"},  //提交的数据
            success: function(return_data){
                // return_data是服务器端返回的字符串
                var obj = JSON.parse(return_data);
            }
        })

建议：永远让服务器端返回一个字典
return HttpResponse(json.dumps(字典))

格式

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(\'#ajax_submit\').click(function () {

                $.ajax({
                    url:\'/test_ajax\',
                    type:\'POST\',
                    data:{\'hostname\':$(\'#hostname\').val(),\'ip\':$(\'#ip\').val(),\'port\':$(\'#port\').val(),\'b_id\':$(\'#b_id\').val()},
　　　　　　　　　　　 dataType:JSON,   //对views返回的数据return_data，执行JSON.parse(return_data)，也就是下面的obj
　　　　　　　　　　　 traditional:true //设置此参数后，data的value值可以为列表。
                    success:function (obj) {　　//执行成功后，这里必须有参数，服务器端返回的数据放在obj里
　　　　　　　　　　　　　　if (obj.status){
                            location.reload()   //刷新当前页面
　　　　　　　　　　　　　　    location.href = \'/host\'　　//跳转到/host这个地址
                        }else {
                            alert(obj.error)
                        }
                    }
　　　　　　　　　　　 error:function(){  //发生未知错误会执行，服务端返回的错误不算。
                    }
                    })
            })
        })
    </script>

 

obj = JSON.parse(return_data)　　# 字符串转换成对象

str = JSON.stringify(obj)　　# 对象转换成字符串

实例：

视图函数

def test_ajax(request):
    import json
    ret = {\'status\':True,\'error\':None,\'data\':None}   # 让服务器返回一个字典
    try:
        h = request.POST.get(\'hostname\')
        i = request.POST.get(\'ip\')
        p = request.POST.get(\'port\')
        b = request.POST.get(\'b_id\')

        if h and len(h) >5:
            models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)
            return HttpResponse(json.dumps(ret))
        else:
            ret[\'status\'] = False
            ret[\'error\'] = \'太短了\'
            return HttpResponse(json.dumps(ret))   # HttpResponse只能返回字符串，所以这里要用json.dumps(ret),将字典转成字符串。
    except Exception as e:
        ret[\'status\'] = False
        ret[\'error\'] = \'请求错误\'
        return HttpResponse(json.dumps(ret))

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <form id="addform" action="/edit_app" method="POST">
        <p><input name="id" value="{{ app_obj.id }}" style="display: none"></p>
        <p><input id="app" type="text"  name="app" value="{{ app_obj.name }}" ></p>

        <select id="host" name="host" multiple>
            {% for i in host_obj %}
                <option value=\'{{ i.id }}\'>{{ i }}</option>
            {% endfor %}
        </select>
        <p><input type="submit" value="提交"></p>
        <p id="ajax_submit">悄悄提交</p>
    </form>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(\'#host\').val({{ host_list }});
            $(\'#ajax_submit\').click(function () {

                $.ajax({
                    url:\'/app_add_ajax\',
                    type:\'POST\',
                    data:$(\'#addform\').serialize(), //获取表单里的数据
                    dataType: JSON,
                    traditional: true,
                    success:function (obj) {
                        if (obj.status){
                            console.log(obj);
                            location.reload()
                        }else {
                            console.log(obj.error)
                        }
                    },
                    error:function () {     //发生未知错误会执行

                    }
                    })
            })
        })
    </script>
</body>
</html>

应用场景：

如果发送的是普通数据推荐顺序：jQuery > XMLHttpRequest > iframe

 

文件上传的三种方式：

前端文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width: 200px;
            height: 100px;
            position: relative;

        }
        .c1{
            width: 200px;
            height: 100px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
            opacity: 0;
        }
        .c2{
            width: 200px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #e0ffef;
            z-index: 90;
        }

    </style>

</head>
<body>

    <div class="d1">
        <input id="fafafa" class="c1" type="file" name="file1">
        <input class="c2" type="button" value="上传">
    </div>
    // XHR方式上传文件
    <input class="c3" type="button" value="提交XHR" onclick="xhrSubmit();">
    
    // jQuery方式上传文件
    <input class="c3" type="button" value="提交jQuery" onclick="jQuerySubmit();">

    // iframe方式上传文件
    <form id="form1" action="/upload/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none"></iframe>
        <input id="file" type="file" name="fafafa" onchange="changeUpload();">
        <input id="iframe1" type="submit" value="提交iframe" onclick="iframeSubmit();">
        <div id="preview"></div>

    </form>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
    
    // XHR方式上传文件    
        function xhrSubmit() {
            var file_obj = document.getElementById(\'fafafa\').files[0];

            var fd = new FormData();
            fd.append(\'username\',\'root\');
            fd.append(\'fafafa\',file_obj);

            var xhr = new XMLHttpRequest();
            xhr.open(\'POST\',\'/upload/\',true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4){
                    var obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                }
            };
            xhr.send(fd);
        }
        
    // jQuery方式上传文件
        function jQuerySubmit(){
            var fileObj = $("#fafafa")[0].files[0];
            var fd = new FormData();
            fd.append(\'username\',\'root\');
            fd.append("fafafa", fileObj);

            $.ajax({
                type:\'POST\',
                url: \'/upload/\',
                data: fd,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success: function(arg1,arg2,arg3){
                    console.log(arg1);  // 服务器端返回的数据
                    console.log(arg2);  // success
                    console.log(arg3);  // 服务器端返回的XML对象
                }
            });
        }
        
    // iframe方式上传文件
        function iframeSubmit() {
            $(\'#ifm1\').load(function () {
                var text = $(this).contents().find(\'body\').text();
                var obj = JSON.parse(text);
                console.log(obj);
                $(\'#preview\').empty();
                var imgTag = document.createElement(\'img\');
                imgTag.src = \'/\' + obj.data;
                $(\'#preview\').append(imgTag)
            });
        }
        
    // iframe方式上传图片，含有预览功能
        function changeUpload() {
            $(\'#ifm1\').load(function () {
                var text = $(this).contents().find(\'body\').text();
                var obj = JSON.parse(text);
                console.log(obj);
                $(\'#preview\').empty();　　　　　　// 显示前对页面进行清空
                var imgTag = document.createElement(\'img\');
                imgTag.src = \'/\' + obj.data;　　// 前端显示的时候需要加入需要在文件的路径前面加/
                $(\'#preview\').append(imgTag)
            });
            $(\'#form1\').submit();
        }

    </script>

</body>
</html>

 

视图函数

def upload(request):
    ret = {
        \'status\': True,
        \'data\': None,
    }

    if request.method == \'POST\':
        username = request.POST.get(\'username\')
        fafafa = request.FILES.get(\'fafafa\')
        print(username,fafafa)

        import os
        img_path = os.path.join(\'static/imgs/\',fafafa.name)
        with open(img_path, \'wb\') as f:
            for item in fafafa.chunks():
                f.write(item)

        ret[\'data\'] = img_path
        return HttpResponse(json.dumps(ret))
    else:
        return render(request,\'uploads.html\')

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode