Ajax 全套

1.ajax.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ajax全套</title>
    <style>
        .btn {
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>
<h1>Ajax全套</h1>
<h3>1.Jquery XML Ajax GET提交数据</h3>
<div>
    <a class="btn" onclick="AjaxSubmit1();">Jquery Ajax GET提交</a>
    <a class="btn" onclick="AjaxSubmit2();">XHL Ajax GET提交</a>
</div>

<h3>2.Jquery XML Ajax POST提交数据</h3>
<div>
    <a class="btn" onclick="AjaxSubmit3();">Jquery Ajax POST提交</a>
    <a class="btn" onclick="AjaxSubmit4();">XHL Ajax POST提交</a>
</div>
{#<h3>3.Iframe 伪造Ajax 提交数据</h3>#}
{#<div><input class="url" type="text"  placeholder="请输入URL: "><a onclick="show_url();">查看</a></div>#}
{#<iframe class="ifm" style="height: 600px;width: 800px;" src="https://www.baidu.com"></iframe>#}

<h3>3.Iframe+Forom表单 伪造Ajax 提交数据</h3>
<div>
    <iframe id="iframe" name="ifra" style="display: none"></iframe>

    <form id="fm" action="/ajax1.html" method="POST" target="ifra">
        <input name="root" value="111111"/>
        <a onclick="AjaxSubmit5();">提交</a>
        {#        <input type="submit">#}
    </form>
</div>
<h3>4.FormData文件上传</h3>
<input type="file" id="img"/>
<a class="btn" onclick="AjaxSubmit6();">Ajax文件上传</a>
<a class="btn" onclick="AjaxSubmit7();">XHL文件上传</a>

<h3>5.ifram+Form文件上传</h3>
<iframe style="display: none" id="iframe1" name="ifra1"></iframe>
<form id="fm1" action="/ajax1.html" method="POST" enctype="multipart/form-data" target="ifra1">
    <input type="text" name="k1"/>
    <input type="text" name="k2"/>
    <input type="file" name="k3"/>
    <a class="btn" onclick="AjaxSubmit8();">提交</a>
</form>



<script src="/static/plugins/jquery.min.js"></script>
<script>

    $(function () {
        AjaxSubmit1();
        AjaxSubmit2();
        AjaxSubmit3();
        AjaxSubmit4();
        AjaxSubmit5();
        show_url();
        AjaxSubmit6();
        AjaxSubmit7();
        reloadIframe1();
        AjaxSubmit8();


    });



    function show_url() {
        var url = $(".url").val();
        $(".ifm").attr("src", url);
    }

    function AjaxSubmit1() {
        $.ajax({
            url: "/ajax1.html",
            data: {"k1": "v1"},
            type: "GET",
            success: function (args) {
                console.log(args);
            },
            error: function (arg) {
                console.log(arg)
            }
        })
    }

    function AjaxSubmit2() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            //接受完毕服务器返回的数据
            if (xhr.readyState == 4) {
                console.log(xhr.responseText)
            }

        };
        xhr.open("GET", "/ajax1.html?k2=v2");
        xhr.send(null);

    }

    function AjaxSubmit3() {
        $.ajax({
            url: "/ajax1.html",
            data: {"k3": "v3"},
            type: "POST",
            success: function (args) {
                console.log(args);
            },
            error: function (arg) {
                console.log(arg)
            }
        })
    }

    function AjaxSubmit4() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            //接受完毕服务器返回的数据
            if (xhr.readyState == 4) {
                console.log(xhr.responseText)
            }

        };
        xhr.open("POST", "/ajax1.html");
        //设置请求头
        xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded');
        xhr.send("k4=v4");

    }

    function reloadIframe() {
        // this=当前标签
        //console.log(ths);
        //console.log(ths.contentWindow);
        //console.log(ths.contentWindow.document.body.innerHTML);
        //console.log($(this).contents().find('body').html());
        var content = this.contentWindow.document.body.innerHTML;
        var obj = JSON.parse(content);
        if (obj.status) {
            //alert(obj.message.root);
            console.log(obj.data.root)
        }
    }


    function AjaxSubmit5() {
        document.getElementById('iframe').onload = reloadIframe;
        document.getElementById('fm').submit();
    }


    function AjaxSubmit6() {
        //document.getElementById('img').files[0])
        var data = new FormData();
        data.append('k1', 'v1');
        data.append('k2', 'v2');
        data.append('file', document.getElementById('img').files[0]);

        $.ajax({
            url: '/ajax1.html',
            type: 'POST',
            data: data,
            success: function (args) {
                console.log(args)
            },
            processData: false,  // tell jQuery not to process the data
            contentType: false  // tell jQuery not to set contentType

        })
    }

    function AjaxSubmit7() {
        var data = new FormData();
        data.append('k1', 'v1');
        data.append('k2', 'v2');
        data.append('file', document.getElementById('img').files[0]);

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                // 接收完毕服务器返回的数据
                console.log(xhr.responseText);

            }
        };
        xhr.open('POST', '/ajax1.html');
        xhr.send(data);
    }


    function AjaxSubmit8() {
        document.getElementById('iframe1').onload = reloadIframe1;
        document.getElementById('fm1').submit();
    }

    function reloadIframe1() {
        var content = this.contentWindow.document.body.innerHTML;
        var obj = JSON.parse(content);
        console.log(obj);
    }
</script>
</body>
</html>

2.views.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
media_path = os.path.join(BASE_DIR, "media")

def ajax(request):
    if request.method == "GET":
        return render(request, "ajax.html")
    
def ajax1(request):
    print(request.GET)
    print(request.POST)
    print(request.FILES)
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        media_file = os.path.join(media_path, fileObj.name)
        with open(media_file, 'wb') as f:
            iter_file = fileObj.chunks()
            for line in iter_file:
                f.write(line)

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

CP http://www.cnblogs.com/wupeiqi/articles/5703697.html

猜你喜欢