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))

posted @ 2018-06-30 00:04  篓子  阅读(158)  评论(0编辑  收藏  举报