一、Ajax（part1）

　　Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）,AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

1、初识

1 $.ajax({2     url: '/host',               #数据提交地址
3     type: "POST",               #提交类型
4     data: {'k1': 123, 'k2': "root"},        #提交的内容 字典格式
5     success: function(data){　　　　#客户端会一直等待服务端返回的数值
6             #data是服务器端返回的字符串
7         var obj =JSON.parse(data);8 }9 })10
11 #建议：永远让服务器端返回一个字典
12 return HttpResponse(json.dumps(字典))

2、简单的前后端交互

 <divclass="shade hide"></div><divclass="add-modal hide"><formmethod="POST"action="/home/"><divclass="group"><inputid='host'type="text"placeholder="主机名"name="hostname" /></div><divclass="group"><inputid='ip'type="text"placeholder="IP"name="ip" /></div><divclass="group"><inputid='port'type="text"placeholder="端口"name="port" /></div><divclass="group"><selectid='sel'name="b_id">{% for op in b_list %}<optionvalue="{{ op.id }}">{{ op.caption }}</option>{% endfor %}</select></div><inputtype="submit"value="提交" /><aid="ajax_submit">要上天提交</a><inputid="cancel"type="button"value="取消" /></form></div>

$(function(){$('#ajax_submit').click(function () {$.ajax({url:"/test_ajax/",type:"POST",data:{'hostname':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#sel').val()},success:function (data) {if(data=='OK'){location.reload()   // 重新加载页面}else {alert(data);}}})})
})

deftest_ajax(request):print(request.method)h= request.POST.get('hostname')i= request.POST.get('ip')p= request.POST.get('port')b= request.POST.get('b_id')print(h,i,p,b)if h and len(h) > 5:        #主机名长度判断models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b) #创建数据return HttpResponse("OK")　　　　#返回OK 严格大小写else:return HttpResponse("主机名太短")　　#返回错误提示

3、对前后端交互完善（当后端有问题时，前端收不到data，页面无反应）

<divclass="add-modal hide"><formmethod="POST"action="/home/"><divclass="group"><inputid='host'type="text"placeholder="主机名"name="hostname" /></div><divclass="group"><inputid='ip'type="text"placeholder="IP"name="ip" /></div><divclass="group"><inputid='port'type="text"placeholder="端口"name="port" /></div><divclass="group"><selectid='sel'name="b_id">{% for op in b_list %}<optionvalue="{{ op.id }}">{{ op.caption }}</option>{% endfor %}</select></div><inputtype="submit"value="提交" /><aid="ajax_submit">要上天提交</a><inputid="cancel"type="button"value="取消" /><spanid="error_msg"></span></form></div>

$(function(){$('#ajax_submit').click(function () {$.ajax({url:"/test_ajax/",type:"POST",data:{'hostname':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#sel').val()},success:function (data) {console.log(data)    // data {"data": null, "status": false, "error": "\u4e3b\u673a\u540d\u592a\u77ed"}var obj = JSON.parse(data);     // 反序列化 把字符串data换成对象obj// 序列化 JSON.stringify() 把obj转换为字符串if(obj.status){location.reload()   // 重新加载页面}else {$('#error_msg').text(obj.error)}}})})
})

importjsondeftest_ajax(request):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')print(h,i,p,b)if h and len(h) > 5:        #主机名长度print("ok")models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)else:ret['status'] =Falseret['error'] = '主机名太短'exceptException as e:ret['status'] =Falseret['error'] = '请求错误'return  HttpResponse(json.dumps(ret))       #对字典进行序列化

4、serialize自动获取表单数据

<formclass="add-form"method="POST"action="/home/"><divclass="group"><inputid='host'type="text"placeholder="主机名"name="hostname" /></div><divclass="group"><inputid='ip'type="text"placeholder="IP"name="ip" /></div><divclass="group"><inputid='port'type="text"placeholder="端口"name="port" /></div><divclass="group"><selectid='sel'name="b_id">{% for op in b_list %}<optionvalue="{{ op.id }}">{{ op.caption }}</option>{% endfor %}</select></div><inputtype="submit"value="提交" /><aid="ajax_submit">要上天提交</a><inputid="cancel"type="button"value="取消" /><spanid="error_msg"></span></form>

$.ajax({url:"/test_ajax/",type:"POST",        data:$('.add-form').serialize(),  //获取表单数据提交 必须是form表单success:function (data) {})

5、Ajax代码补充（traditional，dataType）

$(function(){$('#add_submit_ajax').click(function(){$.ajax({url: '/ajax_add_app',data: {'user': 123,'host_list': [1,2,3,4]},// data: $('#add_form').serialize(),type: "POST",dataType: 'JSON',       // 内部对传过来的数据直接执行JSON.parse 拿到的数据直接为对象而非字符串traditional: true,      // 添加此项 当字典里包含列表时候，后端可以getlist到里面的数据success: function(obj){console.log(obj);},error: function () {     // 未知错误时执行，指前端收不到后台发送的obj时，执行}})});
})

defajax_add_app(request):ret= {'status':True, 'error':None, 'data': None}app_name= request.POST.get('app_name')host_list= request.POST.getlist('host_list')obj= models.Application.objects.create(name=app_name)obj.r.add(*host_list)return HttpResponse(json.dumps(ret))

6、页面跳转和刷新

$.ajax({url: '/index/',data: {'k': 'v', 'list': [1,2,3,4], 'k3': JSON.stringfy({'k1': 'v'}))}, $(form对象).serilize()type: 'POST',dataType: 'JSON':traditional: true,success：function(d){location.reload()              # 刷新location.href = "某个地址"     # 跳转}
})

二、 Ajax（part2）

原生Ajax、JQuery、伪Ajax三种方式使用优先级：

　　如果发送的是【普通数据】: jQuery > XMLHttpRequest > iframe
　　如果发送的是【文件】 :      iframe > jQuery(FormData) > XMLHttpRequest(FormData)

①原生Ajax操作
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）
1、XmlHttpRequest对象介绍

a. void open(String method,String url,Boolen async)用于创建请求参数：method： 请求方式（字符串类型），如：POST、GET、DELETE...url：    要请求的地址（字符串类型）async：  是否异步（布尔类型）b. void send(String body)用于发送请求参数：body： 要发送的数据（字符串类型）c. void setRequestHeader(String header,String value)用于设置请求头参数：header： 请求头的key（字符串类型）vlaue：  请求头的value（字符串类型）d. String getAllResponseHeaders()获取所有响应头返回值：响应头数据（字符串类型）e. String getResponseHeader(String header)获取响应头中指定header的值参数：header： 响应头的key（字符串类型）返回值：响应头中指定的header对应的值f. void abort()终止请求

a. Number readyState状态值（整数）详细：0-未初始化，尚未调用open()方法；1-启动，调用了open()方法，未调用send()方法；2-发送，已经调用了send()方法，未接收到响应；3-接收，已经接收到部分响应数据；4-完成，已经接收到全部响应数据；b. Function onreadystatechange当readyState的值改变时自动触发执行其对应的函数（回调函数）c. String responseText服务器返回的数据（字符串类型）d. XmlDocument responseXML服务器返回的数据（Xml对象）e. Number states状态码（整数），如：200、404...f. String statesText状态文本（字符串），如：OK、NotFound...

2、用原生Ajax做个请求

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title></title>
</head>
<body><inputtype="text"/><inputtype="button"value="Ajax1"onclick="Ajax1();" /><script>functionAjax1(){varxhr= newXMLHttpRequest();xhr.open('POST','/ajax_json/',true);xhr.onreadystatechange= function(){if(xhr.readyState== 4){//接收完毕varobj=JSON.parse(xhr.responseText);console.log(obj);}};xhr.setRequestHeader('k1','v1');//post请求必须加下面这句请求头 不然后台数据拿不到
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');xhr.send("name=root;pwd=123");}</script>
</body>
</html>

defajax(request):return render(request,'ajax.html')defajax_json(request):print(request.POST)ret= {'code':True,'data':None}importjsonreturn HttpResponse(json.dumps(ret))

3、跨浏览器支持
XmlHttpRequest（IE7+, Firefox, Chrome, Opera, etc.）
ActiveXObject("Microsoft.XMLHTTP")（IE6, IE5）

<!DOCTYPE html>
<html>
<headlang="en"><metacharset="UTF-8"><title></title>
</head>
<body><h1>XMLHttpRequest - Ajax请求</h1><inputtype="button"onclick="XmlGetRequest();"value="Get发送请求" /><inputtype="button"onclick="XmlPostRequest();"value="Post发送请求" /><scriptsrc="/statics/jquery-1.12.4.js"></script><scripttype="text/javascript">functionGetXHR(){varxhr= null;if(XMLHttpRequest){xhr= newXMLHttpRequest();}else{xhr= newActiveXObject("Microsoft.XMLHTTP");}returnxhr;}functionXhrPostRequest(){varxhr=GetXHR();//定义回调函数
xhr.onreadystatechange= function(){if(xhr.readyState== 4){//已经接收到全部响应数据，执行以下操作vardata=xhr.responseText;console.log(data);}};//指定连接方式和地址----文件方式
xhr.open('POST',"/test/",true);//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');//发送请求
xhr.send('n1=1;n2=2;');}functionXhrGetRequest(){varxhr=GetXHR();//定义回调函数
xhr.onreadystatechange= function(){if(xhr.readyState== 4){//已经接收到全部响应数据，执行以下操作vardata=xhr.responseText;console.log(data);}};//指定连接方式和地址----文件方式
xhr.open('get',"/test/",true);//发送请求
xhr.send();}</script></body>
</html>

②“伪”AJAX
由于HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求,进行偷偷的发送请求

defajax(request):return render(request,'ajax.html')defajax_json(request):print(request.POST)ret= {'code':True,'data':None}importjsonreturn HttpResponse(json.dumps(ret))

1.Form表单提交到iframe中，页面不刷新

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title></title>
</head>
<body><inputtype="text"/><inputtype="button"value="Ajax1"onclick="Ajax1();" /><formaction="/ajax_json/"method="POST"target="ifm1"> <!--target跟iframe进行关联--><iframeid="ifm1"name="ifm1" ></iframe><inputtype="text"name="username" /><inputtype="text"name="email" /><inputtype="submit"value="Form提交"/></form>
</body>
</html>

2.Ajax提交到iframe中，页面不刷新

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title></title>
</head>
<body><inputtype="text"/><inputtype="button"value="Ajax1"onclick="Ajax1();" /><inputtype='text'id="url" /><inputtype="button"value="发送Iframe请求"onclick="iframeRequest();" /><iframeid="ifm"src="http://www.baidu.com"></iframe><scriptsrc="/static/jquery-1.12.4.js"></script><script>functioniframeRequest(){varurl=$('#url').val();$('#ifm').attr('src',url);}</script>
</body>
</html>

3.Form表单提交到iframe中,并拿到iframe中的数据

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title></title>
</head>
<body><inputtype="text"/><inputtype="button"value="Ajax1"onclick="Ajax1();" /><formaction="/ajax_json/"method="POST"target="ifm1"><iframeid="ifm1"name="ifm1" ></iframe><inputtype="text"name="username" /><inputtype="text"name="email" /><inputtype="submit"onclick="sumitForm();"value="Form提交"/></form><scripttype="text/javascript"src="/static/jquery-1.12.4.js"></script><script>functionsumitForm(){$('#ifm1').load(function(){vartext=$('#ifm1').contents().find('body').text();varobj=JSON.parse(text);console.log(obj)})}</script>
</body>
</html>

三、XmlHttpRequest、JQuery、Iframe进行文件上传 

defupload(request):return render(request,'upload.html')defupload_file(request):username= request.POST.get(('username'))fafafa= request.FILES.get('fafafa')        #获取文件
with open(fafafa.name,'wb') as f:for item infafafa.chunks():f.write(item)print(username,fafafa)ret= {'code': True, 'data': request.POST.get('username')}importjsonreturn HttpResponse(json.dumps(ret))

① 原生Ajax（XmlHttpRequest）上传文件+定制好看的上传按钮

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title></title><style>.upload{display:inline-block;padding:10px;background-color:brown;position:absolute;top:0;bottom:0;right:0;left:0;z-index:90;}.file{width:100px;height:50px;opacity:0;position:absolute;top:0;bottom:0;right:0;left:0;z-index:100;}</style>
</head>
<body><divstyle="position: relative;width: 100px;height: 50px;"><inputclass="file"type="file"id="fafafa"name="afafaf" /><aclass="upload">上传</a></div><inputtype="button"value="提交XHR"onclick="xhrSubmit();" /><script>functionxhrSubmit(){//$('#fafafa')[0]varfile_obj=document.getElementById('fafafa').files[0];//获取文件对象varfd= newFormData();       fd.append('username','root');fd.append('fafafa',file_obj);varxhr= newXMLHttpRequest();xhr.open('POST','/upload_file/',true);xhr.onreadystatechange= function(){if(xhr.readyState== 4){//接收完毕varobj=JSON.parse(xhr.responseText);console.log(obj);}};xhr.send(fd);}</script>
</body>
</html>

② JQuery进行文件的上传

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title></title><style>.upload{display:inline-block;padding:10px;background-color:brown;position:absolute;top:0;bottom:0;right:0;left:0;z-index:90;}.file{width:100px;height:50px;opacity:0;position:absolute;top:0;bottom:0;right:0;left:0;z-index:100;}</style>
</head>
<body><divstyle="position: relative;width: 100px;height: 50px;"><inputclass="file"type="file"id="fafafa"name="afafaf" /><aclass="upload">上传</a></div>{#<inputtype="button"value="提交XHR"onclick="xhrSubmit();" />#}<inputtype="button"value="提交jQuery"onclick="jqSubmit();" /><divid="preview"></div><scriptsrc="/static/jquery-1.12.4.js"></script><script>functionjqSubmit(){//$('#fafafa')[0]varfile_obj=document.getElementById('fafafa').files[0];varfd= newFormData();fd.append('username','root');fd.append('fafafa',file_obj);$.ajax({url:'/upload_file/',type:'POST',data: fd,processData:false,//tell jQuery not to process the data
contentType:false,//tell jQuery not to set contentType
success:function(arg,a1,a2){console.log(arg);console.log(a1);console.log(a2);//Object {readyState: 4, responseText: "{"data": "root", "code": true}", status: 200, statusText: "OK"}
}})}</script>
</body>
</html>

上面两种方式都用到FormData()，但是如果是IE浏览器的话是不支持FormData()，所以就得用到下面这种方式。
③ Iframe进行文件的上传

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title></title>
</head>
<body><formid="form1"action="/upload_file/"method="POST"enctype="multipart/form-data"target="ifm1"><iframeid="ifm1"name="ifm1"style="display: none;"></iframe><inputtype="file"name="fafafa"  /><inputtype="submit"onclick="iframeSubmit();"value="Form提交"/></form><scriptsrc="/static/jquery-1.12.4.js"></script><script>functioniframeSubmit(){$('#ifm1').load(function(){vartext=$('#ifm1').contents().find('body').text();varobj=JSON.parse(text);console.log(obj)})}</script>
</body>
</html>

四、上传文件时图片预览 

① 点击上传文件提交

defupload(request):return render(request,'upload.html')defupload_file(request):username= request.POST.get(('username'))fafafa= request.FILES.get('fafafa')        #获取文件importosimg_path= os.path.join('static/imgs/',fafafa.name)     #static下创建imgs目录with open(img_path,'wb') as f:for item infafafa.chunks():f.write(item)print(username,fafafa)ret= {'code': True, 'data': img_path}importjsonreturn HttpResponse(json.dumps(ret))

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title></title>
</head>
<body><formid="form1"action="/upload_file/"method="POST"enctype="multipart/form-data"target="ifm1"><iframeid="ifm1"name="ifm1"style="display: none;"></iframe><inputtype="file"name="fafafa"  /><inputtype="submit"onclick="iframeSubmit();"value="Form提交"/></form><divid="preview"></div><scriptsrc="/static/jquery-1.12.4.js"></script><script>functioniframeSubmit(){$('#ifm1').load(function(){vartext=$('#ifm1').contents().find('body').text();varobj=JSON.parse(text);console.log(obj)$('#preview').empty();varimgTag=document.createElement('img');imgTag.src= "/" +obj.data;$('#preview').append(imgTag);})}</script>
</body>
</html>

② 选择文件后，直接上传

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title></title>
</head>
<body><formid="form1"action="/upload_file/"method="POST"enctype="multipart/form-data"target="ifm1"><iframeid="ifm1"name="ifm1"style="display: none;"></iframe><inputtype="file"name="fafafa"onchange="changeUpalod();" />//onchange 选中文件时触发
{#<inputtype="submit"onclick="iframeSubmit();"value="Form提交"/>#}</form><divid="preview"></div><scriptsrc="/static/jquery-1.12.4.js"></script><script>functionchangeUpalod(){$('#ifm1').load(function(){　　　　　　　　　　　　　　　　//load  绑定load事件，有数据时执行vartext=$('#ifm1').contents().find('body').text();varobj=JSON.parse(text);$('#preview').empty();varimgTag=document.createElement('img');imgTag.src= "/" +obj.data;$('#preview').append(imgTag);});$('#form1').submit();}</script>
</body>
</html>