原生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')
浙公网安备 33010602011771号