一、Ajax，偷偷向后台发请求
???- XMLHttpRequest
???????- 手动使用
???????- jQuery
???- “伪”Ajax
???????- iframe标签
???????- form表单
???
二、Ajax上传文件
???- jQuery
???- 原生
???以上两种方式可利用formData对象，来封装用户提交的数据
???
???- Iframe+Form
???
???******Iframe+Form*******
url文件
from django.contrib import adminfrom django.urls import pathfrom app01 import viewsurlpatterns = [ ???path(‘admin/‘, admin.site.urls), ???path(‘index.html/‘, views.index), ???path(‘ajax1.html/‘, views.ajax1),]
views文件
from django.shortcuts import render,HttpResponse# Create your views here.def index(request): ???return render(request,‘index.html‘)def ajax1(request): ???print(request.GET) ???print(request.POST) ???return HttpResponse(‘‘)
index.html文件
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.btn{ ???????????display: inline-block; ???????????padding: 5px 10px; ???????????color: orangered; ???????} ???</style></head><body> ???<h1>Ajax全套</h1> ???<h3>1.Ajax发送GET请求</h3> ???<div> ???????<a href="" class="btn" onclick="AjaxSubmit1();">点我1</a> ???????<a href="" class="btn" onclick="AjaxSubmit2();">点我2</a> ???</div> ???<h3>2.Ajax发送POST请求</h3> ???<div> ???????<a href="" class="btn" onclick="AjaxSubmit3();">点我3</a> ???????<a href="" class="btn" onclick="AjaxSubmit4();">点我4</a> ???</div> ???<h3>3 伪ajax</h3> ???<div> ???????<h6>基于Iframe+Form表单的ajax</h6> ???????<iframe src="" frameborder="1px" id="iframe" name="ifra"></iframe> ???????<form action="/ajax1.html/" id="fm" method="post" target="ifra"> ???????????<input type="text" name="root" value="111111"> ???????????<a href="" onclick="AjaxSubmit5()">提交</a>{# ???????????<input type="submit" value="提交">#} ???????</form> ???<h3>4 上传文件</h3> ???????<input type="file" id="img"> ???????<a href="" class="btn" onclick="AjaxSubmit6()">上传1</a> ???????<a href="" class="btn" onclick="AjaxSubmit7()">上传2</a> ???</div> ???<iframe style="display: none" id="iframe1" name="ifra1"></iframe> ???<form id="fm1" action="" method="POST" enctype="multipart/form-data" target="ifra1"> ???????<input type="text" name="k1" /> ???????<input type="text" name="k2" /> ???????<input type="file" name="k3" /> ???????<a onclick="AjaxSubmit8()">提交</a> ???</form> ???<script src="/static/js/jquery-3.3.1.js"></script> ???<script> ???????function AjaxSubmit1() { ???????????$.ajax({ ???????????????url:‘/ajax1.html‘, ???????????????type:‘GET‘, ???????????????data:{‘p‘:123}, ???????????????success:function (arg) { ???????????????????console.log(arg) ???????????????} ???????????}) ????????} ???????function AjaxSubmit2() { ???????????var xhr = new XMLHttpRequest(); ???????????xhr.onreadystatechange = function () { ???????????????if(xhr.readyState == 4){ ???????????????????//接受完毕，服务器返回的数据 ???????????????????{#xhr.responseText //返回的文本信息#} ???????????????????console.log(xhr.responseText) ???????????????} ???????????}; ???????????xhr.open(‘GET‘,‘/ajax1.html?p=123456‘); ???????????xhr.send(null); ????????} ???????function AjaxSubmit3() { ???????????$.ajax({ ???????????????url:‘/ajax1.html/‘, ???????????????type:‘POST‘, ???????????????data:{‘p‘:5555}, ???????????????success:function (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; charset-UTF-8‘); ???????????xhr.send(‘p=66666‘); ????????} ???????function AjaxSubmit5() { ???????????document.getElementById(‘iframe‘).onload = reloadIframe; ???????????document.getElementById(‘fm‘).submit(); ????????} ???????function reloadIframe() { ????????????var content = this.contentWindow.document.body.innerHTML; ????????????var obj = JSON.parse(content); ????????????if(obj.status){ ????????????????alert(obj.message) ????????????} ????????} ???????function AjaxSubmit6() { ????????????var data = new FormData(); ????????????data.append(‘k1‘,‘v1‘); ????????????data.append(‘k2‘,‘v2‘); ????????????data.append(‘k3‘,document.getElementById(‘img‘).files[0]); ????????????$.ajax({ ??????????????url:‘ajax1.html/‘, ??????????????type:‘POST‘, ??????????????data:data, ??????????????success:function (arg) { ??????????????????console.log(arg) ??????????????}, ???????????????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(‘k3‘,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>
Ajax全套
原文地址：https://www.cnblogs.com/lhqlhq/p/9202244.html