ajax

jquery_ajax：

function ajaxClick1() {
    $.ajax({
        url:'ajax1.html',
        type:'GET',
        data:{'p':123},
        success:function (arg) {
            console.log(arg)
        }
    })
}

---

原生ajax

GET请求:

function ajaxClick2() {
    var xhr = new XMLHttpRequest(); //创建对象
    xhr.onreadystatechange = function() { //模拟jquery回调函数
        if (xhr.readyState){
            console.log(xhr.responseText)
        }
    };
    xhr.open('GET','/ajax1.html?p=123'); 
    xhr.send(null);
}

django  POST请求:

function ajaxClick4() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState){
            console.log(xhr.responseText)
        }
    };
    xhr.open('POST','/ajax1.html');
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send('p=123');
}

---

iframe仿造ajax请求

html:

<h3>iframe伪造ajax</h3>
<iframe name="ifra" id="iframe"></iframe>
<form id="fm" action="ajax1.html" method="post" target="ifra">
    <input type="text" name="name">
    <a onclick="ajaxClick5()">提交</a>
</form>

js:

function ajaxClick5() {
    document.getElementById('iframe').onload = iframeClick;
    document.getElementById('fm').submit();
}

function iframeClick() {
    var ifr_load = this.contentWindow.document.body.innerHTML;
    var obj =   JSON.parse(ifr_load);
    if (obj.status){
        alert(obj.message)
    }
}

---

jquery_ajax上传文件

function ajaxUpload() {
    var data = new FormData();  创建FROMDATA对象
    data.append('k1','v1');
    data.append('k2','v2');
    data.append('k3',document.getElementById('files').files[0]);
    $.ajax({
        url:'/ajax1.html',
        type:'POST',
        data:data,
        success:function (arg) {
            console.log(arg);
        },
        processData:false,
        contentType:false
    })
}

---

原生ajax上传文件：

function ajaxUpload1() {
    var data = new FormData();
    data.append('k1','v1');
    data.append('k2','v2');
    data.append('k3',document.getElementById('files').files[0]);
    var xhr = new XMLHttpRequest();
    xhr.open('POST','/ajax1.html');
    xhr.onreadystatechange = function () {
        if (xhr.readyState){
            console.log(xhr.responseText)
        }
    };
    xhr.send(data);
}

---

iframe伪造ajax上传文件

HTML:

<iframe name="iframe" id="iframeUpload" style="display: none"></iframe>
<form id="fm" action="/ajax1.html" method="post" enctype="multipart/form-data" target="iframe">
    <input type="text" name="k1">
    <input type="text" name="k2">
    <input type="file" name="k3">
    <a onclick="ajaxSubmit()">提交</a>
</form>

js:

<script>
    function ajaxSubmit() {
        document.getElementById('iframeUpload').onload = iframeUploadFiles;
        document.getElementById('fm').submit();
    }

    function iframeUploadFiles() {
        var data = this.contentWindow.document.body.innerHTML;
        obj = JSON.parse(data);
        if (!obj.status) {
            alert(obj.message)
        }
    }
</script>

---

django不通过FORM组件上传文件：

def ajax1(request):
    data = {'status':True,'message':'...'}
    print(request.GET)
    print(request.POST)
    file_name = request.FILES['k3']
    with open('123','wb') as file:
        for i in file_name.chunks():
            file.write(i)
    import json
    return HttpResponse(json.dumps(data))

---

iframe伪造ajax上传图片，让图片可以在html预览:

html:

<iframe name="iframe" id="iframe_files"></iframe>
<form id="fm" action="/ajax_upload.html" method="post" enctype="multipart/form-data" target="iframe">
    <input type="file" name="k3" onchange="ajaxSubmit()">   #使用onchange监测状态，状态改变后触发函数执行
</form>
<div id="img_upload"></div>

js:

<script>
    function ajaxSubmit() {
        document.getElementById('iframe_files').onload = uploadFiles;
        document.getElementById('fm').submit();
    }
    function uploadFiles() {
        var obj = this.contentWindow.document.body.innerHTML;
        var file_status = JSON.parse(obj);
        if (file_status.status) {
            var create_img_tag = document.createElement('img');
            create_img_tag.src = file_status.data;
            document.getElementById('img_upload').innerHTML = "";   #js实现清空标签内容
            document.getElementById('img_upload').appendChild(create_img_tag);
        }
    }
</script>

django代码部分:

def upload_files(request):
    return render(request,'upload_files.html')


def ajax_upload(request):
    nid = str(uuid.uuid4()) #引入UUID4让每张图片名字不同
    ret = {'status':True,'data':None,'message':None}
    obj = request.FILES.get('k3')
    files_path = os.path.join('static', nid + obj.name) #图片储存在静态文件夹内
    with open(files_path,'wb') as file:
        for chunk in obj.chunks():
            file.write(chunk)
    ret['data'] = files_path
    return HttpResponse(json.dumps(ret))