一，原生ajax，异步回调。
GET传值方式：
<script> function add1() { //使用原生ajax需要使用XMLHttpRquest对象 var obj=new XMLHttpRequest();//声明一个XML对象obj obj.onreadystatechange=function () { //回调函数，数据发生改变时触发操作 if(obj.readyState==4){ //readyState有0到4五种状态，4代表传值完成 alert(obj.responseText)//服务器返回值 } }; obj.open("GET",'/add2/?num1=1&num2=2');//创建一种连接请求，使用GET方式，参数使用/add2/?num1=1&num2=2传递 obj.send();//发送数据 } </script>
POST传值：
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ alert(xhr.responseText); } }; xhr.open('POST','/add2/'); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//() xhr.send("i1=12&i2=19");
基于ajax的文件上传操作：
<body>
<input type="file" id="pic">
<input type="button" value="上传" onclick="upload1()">
<div id="container1"></div>
</body>
<script>
function upload1() {
var pic=document.getElementById("pic").files[0];
console.log(pic);
var formdata=new FormData();//使用FormData声明一个文件对象
formdata.append('tu',pic);//添加一个字典值到对象
var obj=new XMLHttpRequest();
obj.onreadystatechange=function () {
if(obj.readyState==4){
var file_path=obj.responseText;
var tag=document.createElement("img");
tag.src="/"+file_path;
document.getElementById("container1").appendChild(tag);
}
};
obj.open("POST",'/upload/');
obj.send(formdata);//发送formdata对象到后台
}
</script>
后台处理代码：
def upload(request): if request.method=="GET": return render(request,"upload.html") else: #python接受文件需要使用FILES方法 pic=request.FILES.get("tu") #获取到值后是一个对象，可以调用.name与.size方法查看文件名称及大小 file_path=os.path.join("static",pic.name) #打开文件写入本地，注意是使用bytes with open(file_path,"wb") as f: for chunk in pic.chunks():#chunks方法是可以获取到文件内容 f.write(chunk) return HttpResponse(file_path)
二，JQuery的ajax
一，post与get传值
<script src="/static/js/jquery-3.2.1.js"></script> <script> $("#btnt").click(function () { var user=$("#tname").val(); var passwd=$("#tpwd").val(); var token= $.cookie("csrftoken"); $.ajax( { url:'/app01/load.html', type:'POST', headers:{'X-CSRFToken':token}, data:{"user":user, "pwd":passwd }, success:function (arg) { arg=JSON.parse(arg); if(arg.res=="ok"){ alert("登录成功"); if(arg.gender=="男"){ location.href="boy.html" }else if(arg.gender=="女"){ location.href="gril.html" } }else{ $("#tname").val(""); $("#tpwd").val(""); } } }) }) </script>
基于JQuery的文件上传
function upload(){ var formData = new FormData(); formData.append('k1','v1'); // formData.append('fafafa',document.getElementById('i1').files[0]); formData.append('fafafa',$('#i2')[0].files[0]); // $('#i2') -> $('#i2')[0] // document.getElementById('i1') -> $(document.getElementById('i1')) $.ajax({ url: '/upload/', type: 'POST', data: formData, contentType:false, processData:false, success:function(arg){ var tag = document.createElement('img'); tag.src = "/"+ arg; $('#container2').append(tag); } }) }
三，伪ajax操作
<h1>伪 Ajax上传文件</h1>
<form id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">
<iframe id="ifr" name="ifr" style="display: none"></iframe>
<input type="file" name="fafafa" />
<a onclick="upload3();">上传</a>
</form>
<div id="container3"></div>
function upload3(){ document.getElementById('ifr').onload = loadIframe; document.getElementById('f1').submit(); } function loadIframe(){ var content = document.getElementById('ifr').contentWindow.document.body.innerText; var tag = document.createElement('img'); tag.src = "/"+ content; $('#container3').append(tag); }