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