Day24--Part2-伪Ajax(iframe)
生活随笔
收集整理的這篇文章主要介紹了
Day24--Part2-伪Ajax(iframe)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考：http://www.pythonsite.com/ 趙凡同學的博客，每一份努力都值得期許！ 867468837
?
Ajax操作---偽Ajax (iframe)
?一，基于iframe實現偽Ajax請求。
?1. Ajax.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="text"/><input type="button" value="Ajax1" οnclick="Ajax1();"/><iframe src="http://www.baidu.com"></iframe>?頁面效果：把百度的頁面嵌套進來了。
?
?
2.
<script type="text/javascript" src="/static/jquery-1.12.4.js"></script> 其作用是用來引入Javascript代碼?
?
3. 測試效果：
?頁面上的其它內容都沒有刷新，說明是偷偷發送了iframe請求。
?
?
4. 利用iframe的功能實現偽Ajax, 先把剛才測試iframe的部分注釋掉。
ajax.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="text"/><input type="button" value="Ajax1" οnclick="Ajax1();"/><!--<input type="text" id="url"/><input type="button" value="發送iframe請求" οnclick="iframeRequest();"/><iframe id="ifm" src="http://www.baidu.com"></iframe>--><form action="/ajax_json/" method="POST"><input type="text" name="username"/><input type="text" name="email"/><input type="submit" value="Form提交"/></form>?測試效果，一點擊的話，就會跳轉到ajax_json
?
?
5. 把form表單中的數據發給iframe，然后就會實現偷偷發送（頁面不跳轉）。
form表單里面有數據，iframe又可以實現偷偷地發。兩者結合起來就可以實現偷偷發送數據了。
?
target 屬性規定在何處打開 action URL。target=_blank 表示在新窗口中打開。
?
target="ifm1" 讓form與iframe建立關系
ajax.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="text"/><input type="button" value="Ajax1" οnclick="Ajax1();"/><!--<input type="text" id="url"/><input type="button" value="發送iframe請求" οnclick="iframeRequest();"/><iframe id="ifm" src="http://www.baidu.com"></iframe>--><form action="/ajax_json/" method="POST" target="ifm1"><iframe name="ifm1"></iframe><input type="text" name="username"/><input type="text" name="email"/><input type="submit" value="Form提交"/></form>
?頁面效果：
?
后臺也拿到了數據
6. 拿到用戶的返回值
那么iframe怎么樣才能拿到用戶的返回值呢？？？
修改程序，iframe中返回的是username
?
views.py
# 基于ModelForm方式來實現 from django.shortcuts import render,HttpResponse from app01 import models from django import forms from django.forms import fields as Ffields from django.forms import widgets as Fwidgets def orm(request):#models.UserGroup.objects.create(name='CEO')#models.UserGroup.objects.create(name='CFO')#models.UserGroup.objects.create(name='COO')return HttpResponse('orm')class UserInfoModelForm(forms.ModelForm):#自定義額外的字段，比如是否要保存一個月內免登陸。is_remember=Ffields.CharField(widget=Fwidgets.CheckboxInput())class Meta:model=models.UserInfo #指去哪個類里面去獲取字段，以后也可以做增刪改查。fields='__all__' #代指的是所有的field字段#fields=['username'] #還可以是一個列表，可以選擇要展示哪幾列,只展示username這一列#exclude=['username'] #把username列排除在外了。#labels={'username':'請填入用戶名'}#help_texts={'username':'請把你的名字寫對'}#widgets={'username':Fwidgets.Textarea(attrs={'class':'c1'})}error_messages={'__all__':{},'email':{'required':'郵箱不能為空','invalid':'郵箱格式錯誤',}}#field_classes={'email':Ffields.URLField}def clean_username(self):old=self.cleaned_data['username']return oldclass UserInfoForm(forms.Form):username = Ffields.CharField(max_length=32)email=Ffields.EmailField()#user_type=fields.ForeignKey(to='UserType',to_field='id')user_type=Ffields.ChoiceField(choices=models.UserType.objects.values_list('id','caption'))def __init__(self,*args,**kwargs):super(UserInfoForm,self).__init__(*args,**kwargs)self.fields['user_type'].choices=models.UserType.objects.values_list('id','caption')def index(request):if request.method=='GET':obj=UserInfoModelForm()return render(request,'index.html',{'obj':obj})elif request.method=='POST':obj=UserInfoModelForm(request.POST)if obj.is_valid():#obj.save()#這個save實現的時候，其實內部包含了2個步驟。可以拆開。instance=obj.save(False) #什么也沒干instance.save() #只會保存當前這個類，而不會保存manytomanyobj.save_m2m() #保存manytomany#print(obj.is_valid())#print(obj.cleaned_data)#print(obj.errors.as_json())return render(request, 'index.html', {'obj': obj})def user_list(request):li=models.UserInfo.objects.all().select_related('user_type') #先把userinfo中的數據取出來return render(request,'user_list.html',{'li':li})def user_edit(request,nid):#獲取當前id對應的用戶信息#顯示用戶已經存在的數據if request.method=='GET':user_obj=models.UserInfo.objects.filter(id=nid).first() #獲取對象mf=UserInfoModelForm(instance=user_obj) #幫咱們生成標簽return render(request, 'user_edit.html',{'mf':mf,'nid':nid})elif request.method=='POST':user_obj = models.UserInfo.objects.filter(id=nid).first() #獲取對象mf = UserInfoModelForm(request.POST,instance=user_obj) #instance傳進來表示更新，不加的話表示新建了一條數據。if mf.is_valid():mf.save()else:print(mf.errors.as_json())return render(request, 'user_edit.html', {'mf': mf, 'nid': nid})def ajax(request):return render(request,'ajax.html')def ajax_json(request):print(request.POST)ret={'code':True,'data':request.POST.get('username')} #字典import jsonreturn HttpResponse(json.dumps(ret),status=404,reason='Not Found')ajax.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="text"/><input type="button" value="Ajax1" οnclick="Ajax1();"/><!--<input type="text" id="url"/><input type="button" value="發送iframe請求" οnclick="iframeRequest();"/><iframe id="ifm" src="http://www.baidu.com"></iframe>--><form action="/ajax_json/" method="POST" target="ifm1"><iframe name="ifm1"></iframe><input type="text" name="username"/><input type="text" name="email"/><input type="submit" value="Form提交"/></form><script type="text/javascript" src="/static/jquery-1.12.4.js"></script><script>function getXHR(){var xhr = null;if(XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}return xhr;}function Ajax1(){//var xhr=new XMLHttpRequest(); //創建XMLHttpRequest對象var xhr=getXHR(); //為了兼容IE舊版本xhr.open('POST','/ajax_json/',true); //指定用什么形式發，發到哪里，是否異步(是)xhr.onreadystatechange=function(){if(xhr.readyState==4){//接收完畢，放到XMLHttprequest對象里面了var obj=JSON.parse(xhr.responseText);console.log(obj); //這就是我們要拿的返回值}};xhr.setRequestHeader('k1','v1'); //發送的時候帶著請求頭，csrf的時候用。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//設置請求頭，判斷發來的請求頭里面，怎么樣把數據打包的。這樣后臺就知道怎么樣去解了。xhr.send("name=root;pwd=123"); //發送的數據}/*function iframeRequest(){var url=$('#url').val();$('#ifm').attr('src',url);}*/</script> </body> </html>?
?頁面效果：發現提交以后，數據放到了iframe中，咱們希望數據放到JS中，而不是iframe中。
發現iframe加載的時候，又嵌套了一層HTML。document是個特殊的東西，所以如果直接通過.text / .children去獲取數據是獲取不到的。需要通過特殊的方式才能獲取到。
?
?
?
?
當服務器端有數據返回的時候，ajax.html中的 iframe 就會執行一個onload事件。這時才會把數據顯示到頁面上。
Ajax.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="text"/><input type="button" value="Ajax1" οnclick="Ajax1();"/><!--<input type="text" id="url"/><input type="button" value="發送iframe請求" οnclick="iframeRequest();"/><iframe id="ifm" src="http://www.baidu.com"></iframe>--><form action="/ajax_json/" method="POST" target="ifm1"><iframe name="ifm1" οnlοad="iframeLoad();"></iframe><input type="text" name="username"/><input type="text" name="email"/><input type="submit" οnclick="submitForm();" value="Form提交"/></form><script type="text/javascript" src="/static/jquery-1.12.4.js"></script><script>function getXHR(){var xhr = null;if(XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}return xhr;}function Ajax1(){//var xhr=new XMLHttpRequest(); //創建XMLHttpRequest對象var xhr=getXHR(); //為了兼容IE舊版本xhr.open('POST','/ajax_json/',true); //指定用什么形式發，發到哪里，是否異步(是)xhr.onreadystatechange=function(){if(xhr.readyState==4){//接收完畢，放到XMLHttprequest對象里面了var obj=JSON.parse(xhr.responseText);console.log(obj); //這就是我們要拿的返回值}};xhr.setRequestHeader('k1','v1'); //發送的時候帶著請求頭，csrf的時候用。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//設置請求頭，判斷發來的請求頭里面，怎么樣把數據打包的。這樣后臺就知道怎么樣去解了。xhr.send("name=root;pwd=123"); //發送的數據}/*function iframeRequest(){var url=$('#url').val();$('#ifm').attr('src',url);}*/function iframeLoad(){console.log(123);}</script> </body> </html>?頁面效果：報錯是因為? οnclick="iframeLoad()" 時，沒有找到JS呢，JS是在下面加載的。
?
?
也可以在點submitForm的時候，再給iframe綁定事件。這樣綁定的時機就會晚一些。這時就不會報錯了。頁面效果同上。
views.py
# 基于ModelForm方式來實現 from django.shortcuts import render,HttpResponse from app01 import models from django import forms from django.forms import fields as Ffields from django.forms import widgets as Fwidgets def orm(request):#models.UserGroup.objects.create(name='CEO')#models.UserGroup.objects.create(name='CFO')#models.UserGroup.objects.create(name='COO')return HttpResponse('orm')class UserInfoModelForm(forms.ModelForm):#自定義額外的字段，比如是否要保存一個月內免登陸。is_remember=Ffields.CharField(widget=Fwidgets.CheckboxInput())class Meta:model=models.UserInfo #指去哪個類里面去獲取字段，以后也可以做增刪改查。fields='__all__' #代指的是所有的field字段#fields=['username'] #還可以是一個列表，可以選擇要展示哪幾列,只展示username這一列#exclude=['username'] #把username列排除在外了。#labels={'username':'請填入用戶名'}#help_texts={'username':'請把你的名字寫對'}#widgets={'username':Fwidgets.Textarea(attrs={'class':'c1'})}error_messages={'__all__':{},'email':{'required':'郵箱不能為空','invalid':'郵箱格式錯誤',}}#field_classes={'email':Ffields.URLField}def clean_username(self):old=self.cleaned_data['username']return oldclass UserInfoForm(forms.Form):username = Ffields.CharField(max_length=32)email=Ffields.EmailField()#user_type=fields.ForeignKey(to='UserType',to_field='id')user_type=Ffields.ChoiceField(choices=models.UserType.objects.values_list('id','caption'))def __init__(self,*args,**kwargs):super(UserInfoForm,self).__init__(*args,**kwargs)self.fields['user_type'].choices=models.UserType.objects.values_list('id','caption')def index(request):if request.method=='GET':obj=UserInfoModelForm()return render(request,'index.html',{'obj':obj})elif request.method=='POST':obj=UserInfoModelForm(request.POST)if obj.is_valid():#obj.save()#這個save實現的時候，其實內部包含了2個步驟。可以拆開。instance=obj.save(False) #什么也沒干instance.save() #只會保存當前這個類，而不會保存manytomanyobj.save_m2m() #保存manytomany#print(obj.is_valid())#print(obj.cleaned_data)#print(obj.errors.as_json())return render(request, 'index.html', {'obj': obj})def user_list(request):li=models.UserInfo.objects.all().select_related('user_type') #先把userinfo中的數據取出來return render(request,'user_list.html',{'li':li})def user_edit(request,nid):#獲取當前id對應的用戶信息#顯示用戶已經存在的數據if request.method=='GET':user_obj=models.UserInfo.objects.filter(id=nid).first() #獲取對象mf=UserInfoModelForm(instance=user_obj) #幫咱們生成標簽return render(request, 'user_edit.html',{'mf':mf,'nid':nid})elif request.method=='POST':user_obj = models.UserInfo.objects.filter(id=nid).first() #獲取對象mf = UserInfoModelForm(request.POST,instance=user_obj) #instance傳進來表示更新，不加的話表示新建了一條數據。if mf.is_valid():mf.save()else:print(mf.errors.as_json())return render(request, 'user_edit.html', {'mf': mf, 'nid': nid})def ajax(request):return render(request,'ajax.html')def ajax_json(request):import timetime.sleep(3)print(request.POST)ret={'code':True,'data':request.POST.get('username')} #字典import jsonreturn HttpResponse(json.dumps(ret),status=404,reason='Not Found')?
Ajax.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="text"/><input type="button" value="Ajax1" οnclick="Ajax1();"/><!--<input type="text" id="url"/><input type="button" value="發送iframe請求" οnclick="iframeRequest();"/><iframe id="ifm" src="http://www.baidu.com"></iframe>--><form action="/ajax_json/" method="POST" target="ifm1"><iframe id="ifm1" name="ifm1"></iframe><input type="text" name="username"/><input type="text" name="email"/><input type="submit" οnclick="submitForm();" value="Form提交"/></form><script type="text/javascript" src="/static/jquery-1.12.4.js"></script><script>function getXHR(){var xhr = null;if(XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}return xhr;}function Ajax1(){//var xhr=new XMLHttpRequest(); //創建XMLHttpRequest對象var xhr=getXHR(); //為了兼容IE舊版本xhr.open('POST','/ajax_json/',true); //指定用什么形式發，發到哪里，是否異步(是)xhr.onreadystatechange=function(){if(xhr.readyState==4){//接收完畢，放到XMLHttprequest對象里面了var obj=JSON.parse(xhr.responseText);console.log(obj); //這就是我們要拿的返回值}};xhr.setRequestHeader('k1','v1'); //發送的時候帶著請求頭，csrf的時候用。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//設置請求頭，判斷發來的請求頭里面，怎么樣把數據打包的。這樣后臺就知道怎么樣去解了。xhr.send("name=root;pwd=123"); //發送的數據}/*function iframeRequest(){var url=$('#url').val();$('#ifm').attr('src',url);}*/function submitForm(){$('#ifm1').load(function(){console.log(123);})}</script> </body> </html>?頁面效果：
?
去iframe中獲取用戶數據，基于iframe可以返回數據也可以拿到數據了。
?
程序粘貼：
?
views.py
# 基于ModelForm方式來實現 from django.shortcuts import render,HttpResponse from app01 import models from django import forms from django.forms import fields as Ffields from django.forms import widgets as Fwidgets def orm(request):#models.UserGroup.objects.create(name='CEO')#models.UserGroup.objects.create(name='CFO')#models.UserGroup.objects.create(name='COO')return HttpResponse('orm')class UserInfoModelForm(forms.ModelForm):#自定義額外的字段，比如是否要保存一個月內免登陸。is_remember=Ffields.CharField(widget=Fwidgets.CheckboxInput())class Meta:model=models.UserInfo #指去哪個類里面去獲取字段，以后也可以做增刪改查。fields='__all__' #代指的是所有的field字段#fields=['username'] #還可以是一個列表，可以選擇要展示哪幾列,只展示username這一列#exclude=['username'] #把username列排除在外了。#labels={'username':'請填入用戶名'}#help_texts={'username':'請把你的名字寫對'}#widgets={'username':Fwidgets.Textarea(attrs={'class':'c1'})}error_messages={'__all__':{},'email':{'required':'郵箱不能為空','invalid':'郵箱格式錯誤',}}#field_classes={'email':Ffields.URLField}def clean_username(self):old=self.cleaned_data['username']return oldclass UserInfoForm(forms.Form):username = Ffields.CharField(max_length=32)email=Ffields.EmailField()#user_type=fields.ForeignKey(to='UserType',to_field='id')user_type=Ffields.ChoiceField(choices=models.UserType.objects.values_list('id','caption'))def __init__(self,*args,**kwargs):super(UserInfoForm,self).__init__(*args,**kwargs)self.fields['user_type'].choices=models.UserType.objects.values_list('id','caption')def index(request):if request.method=='GET':obj=UserInfoModelForm()return render(request,'index.html',{'obj':obj})elif request.method=='POST':obj=UserInfoModelForm(request.POST)if obj.is_valid():#obj.save()#這個save實現的時候，其實內部包含了2個步驟。可以拆開。instance=obj.save(False) #什么也沒干instance.save() #只會保存當前這個類，而不會保存manytomanyobj.save_m2m() #保存manytomany#print(obj.is_valid())#print(obj.cleaned_data)#print(obj.errors.as_json())return render(request, 'index.html', {'obj': obj})def user_list(request):li=models.UserInfo.objects.all().select_related('user_type') #先把userinfo中的數據取出來return render(request,'user_list.html',{'li':li})def user_edit(request,nid):#獲取當前id對應的用戶信息#顯示用戶已經存在的數據if request.method=='GET':user_obj=models.UserInfo.objects.filter(id=nid).first() #獲取對象mf=UserInfoModelForm(instance=user_obj) #幫咱們生成標簽return render(request, 'user_edit.html',{'mf':mf,'nid':nid})elif request.method=='POST':user_obj = models.UserInfo.objects.filter(id=nid).first() #獲取對象mf = UserInfoModelForm(request.POST,instance=user_obj) #instance傳進來表示更新，不加的話表示新建了一條數據。if mf.is_valid():mf.save()else:print(mf.errors.as_json())return render(request, 'user_edit.html', {'mf': mf, 'nid': nid})def ajax(request):return render(request,'ajax.html')def ajax_json(request):import timetime.sleep(3)print(request.POST)ret={'code':True,'data':request.POST.get('username')} #字典import jsonreturn HttpResponse(json.dumps(ret),status=404,reason='Not Found')?
ajax.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="text"/><input type="button" value="Ajax1" οnclick="Ajax1();"/><!--<input type="text" id="url"/><input type="button" value="發送iframe請求" οnclick="iframeRequest();"/><iframe id="ifm" src="http://www.baidu.com"></iframe>--><form action="/ajax_json/" method="POST" target="ifm1"><iframe id="ifm1" name="ifm1"></iframe><input type="text" name="username"/><input type="text" name="email"/><input type="submit" οnclick="submitForm();" value="Form提交"/></form><script type="text/javascript" src="/static/jquery-1.12.4.js"></script><script>function getXHR(){var xhr = null;if(XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}return xhr;}function Ajax1(){//var xhr=new XMLHttpRequest(); //創建XMLHttpRequest對象var xhr=getXHR(); //為了兼容IE舊版本xhr.open('POST','/ajax_json/',true); //指定用什么形式發，發到哪里，是否異步(是)xhr.onreadystatechange=function(){if(xhr.readyState==4){//接收完畢，放到XMLHttprequest對象里面了var obj=JSON.parse(xhr.responseText);console.log(obj); //這就是我們要拿的返回值}};xhr.setRequestHeader('k1','v1'); //發送的時候帶著請求頭，csrf的時候用。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//設置請求頭，判斷發來的請求頭里面，怎么樣把數據打包的。這樣后臺就知道怎么樣去解了。xhr.send("name=root;pwd=123"); //發送的數據}/*function iframeRequest(){var url=$('#url').val();$('#ifm').attr('src',url);}*/function submitForm(){$('#ifm1').load(function(){var text=$('#ifm1').contents().find('body').text();var obj=JSON.parse(text);})}</script> </body> </html>?urls.py
from django.conf.urls import url from django.contrib import admin from app01 import viewsurlpatterns = [url(r'^admin/', admin.site.urls),url(r'^index/', views.index),url(r'^user_list/', views.user_list),url(r'^edit-(\d+)/', views.user_edit),url(r'^ajax/$', views.ajax),url(r'^ajax_json/$', views.ajax_json),url(r'^orm/', views.orm), ]?
?
?
?
二，3種方法實現Ajax請求。（原生的，基于jQuery的，基于iframe的偽ajax）哪種情況使用
2.1 如果發送的是普通數據的話---建議使用優先順序jQuery，XMLHttprequest，iframe
?
轉載于:https://www.cnblogs.com/momo8238/p/7765450.html
總結
以上是生活随笔為你收集整理的Day24--Part2-伪Ajax(iframe)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 洛谷P1730最小密度路径
- 下一篇： 20171101从现在开始就请有计划的学