當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Day24--Part2-伪Ajax(iframe)

發(fā)布時(shí)間：2025/4/9 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Day24--Part2-伪Ajax(iframe) 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

參考：http://www.pythonsite.com/ 趙凡同學(xué)的博客，每一份努力都值得期許！ 867468837

Ajax操作---偽Ajax (iframe)

?一，基于iframe實(shí)現(xiàn)偽Ajax請(qǐng)求。

?1. Ajax.html

?頁面效果：把百度的頁面嵌套進(jìn)來了。

3. 測(cè)試效果：

?頁面上的其它內(nèi)容都沒有刷新，說明是偷偷發(fā)送了iframe請(qǐng)求。

4. 利用iframe的功能實(shí)現(xiàn)偽Ajax, 先把剛才測(cè)試iframe的部分注釋掉。

ajax.html

?測(cè)試效果，一點(diǎn)擊的話，就會(huì)跳轉(zhuǎn)到ajax_json

5. 把form表單中的數(shù)據(jù)發(fā)給iframe，然后就會(huì)實(shí)現(xiàn)偷偷發(fā)送（頁面不跳轉(zhuǎn)）。

form表單里面有數(shù)據(jù)，iframe又可以實(shí)現(xiàn)偷偷地發(fā)。兩者結(jié)合起來就可以實(shí)現(xiàn)偷偷發(fā)送數(shù)據(jù)了。

　target 屬性規(guī)定在何處打開 action URL。target=_blank 表示在新窗口中打開。

target="ifm1" 讓form與iframe建立關(guān)系

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();"/><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>

?頁面效果：

后臺(tái)也拿到了數(shù)據(jù)

6. 拿到用戶的返回值

那么iframe怎么樣才能拿到用戶的返回值呢？？？

修改程序，iframe中返回的是username

views.py

# 基于ModelForm方式來實(shí)現(xiàn) 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):#自定義額外的字段，比如是否要保存一個(gè)月內(nèi)免登陸。is_remember=Ffields.CharField(widget=Fwidgets.CheckboxInput())class Meta:model=models.UserInfo #指去哪個(gè)類里面去獲取字段，以后也可以做增刪改查。fields='__all__' #代指的是所有的field字段#fields=['username'] #還可以是一個(gè)列表，可以選擇要展示哪幾列,只展示username這一列#exclude=['username'] #把username列排除在外了。#labels={'username':'請(qǐng)?zhí)钊胗脩裘?#39;}#help_texts={'username':'請(qǐng)把你的名字寫對(duì)'}#widgets={'username':Fwidgets.Textarea(attrs={'class':'c1'})}error_messages={'__all__':{},'email':{'required':'郵箱不能為空','invalid':'郵箱格式錯(cuò)誤',}}#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()#這個(gè)save實(shí)現(xiàn)的時(shí)候，其實(shí)內(nèi)部包含了2個(gè)步驟。可以拆開。instance=obj.save(False) #什么也沒干instance.save() #只會(huì)保存當(dāng)前這個(gè)類，而不會(huì)保存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中的數(shù)據(jù)取出來return render(request,'user_list.html',{'li':li})def user_edit(request,nid):#獲取當(dāng)前id對(duì)應(yīng)的用戶信息#顯示用戶已經(jīng)存在的數(shù)據(jù)if request.method=='GET':user_obj=models.UserInfo.objects.filter(id=nid).first() #獲取對(duì)象mf=UserInfoModelForm(instance=user_obj) #幫咱們生成標(biāo)簽return render(request, 'user_edit.html',{'mf':mf,'nid':nid})elif request.method=='POST':user_obj = models.UserInfo.objects.filter(id=nid).first() #獲取對(duì)象mf = UserInfoModelForm(request.POST,instance=user_obj) #instance傳進(jìn)來表示更新，不加的話表示新建了一條數(shù)據(jù)。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();"/><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(); //創(chuàng)建XMLHttpRequest對(duì)象var xhr=getXHR(); //為了兼容IE舊版本xhr.open('POST','/ajax_json/',true); //指定用什么形式發(fā)，發(fā)到哪里，是否異步(是)xhr.onreadystatechange=function(){if(xhr.readyState==4){//接收完畢，放到XMLHttprequest對(duì)象里面了var obj=JSON.parse(xhr.responseText);console.log(obj); //這就是我們要拿的返回值}};xhr.setRequestHeader('k1','v1'); //發(fā)送的時(shí)候帶著請(qǐng)求頭，csrf的時(shí)候用。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//設(shè)置請(qǐng)求頭，判斷發(fā)來的請(qǐng)求頭里面，怎么樣把數(shù)據(jù)打包的。這樣后臺(tái)就知道怎么樣去解了。xhr.send("name=root;pwd=123"); //發(fā)送的數(shù)據(jù)}/*function iframeRequest(){var url=$('#url').val();$('#ifm').attr('src',url);}*/</script> </body> </html>

?頁面效果：發(fā)現(xiàn)提交以后，數(shù)據(jù)放到了iframe中，咱們希望數(shù)據(jù)放到JS中，而不是iframe中。

發(fā)現(xiàn)iframe加載的時(shí)候，又嵌套了一層HTML。document是個(gè)特殊的東西，所以如果直接通過.text / .children去獲取數(shù)據(jù)是獲取不到的。需要通過特殊的方式才能獲取到。

當(dāng)服務(wù)器端有數(shù)據(jù)返回的時(shí)候，ajax.html中的 iframe 就會(huì)執(zhí)行一個(gè)onload事件。這時(shí)才會(huì)把數(shù)據(jù)顯示到頁面上。

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();"/><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(); //創(chuàng)建XMLHttpRequest對(duì)象var xhr=getXHR(); //為了兼容IE舊版本xhr.open('POST','/ajax_json/',true); //指定用什么形式發(fā)，發(fā)到哪里，是否異步(是)xhr.onreadystatechange=function(){if(xhr.readyState==4){//接收完畢，放到XMLHttprequest對(duì)象里面了var obj=JSON.parse(xhr.responseText);console.log(obj); //這就是我們要拿的返回值}};xhr.setRequestHeader('k1','v1'); //發(fā)送的時(shí)候帶著請(qǐng)求頭，csrf的時(shí)候用。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//設(shè)置請(qǐng)求頭，判斷發(fā)來的請(qǐng)求頭里面，怎么樣把數(shù)據(jù)打包的。這樣后臺(tái)就知道怎么樣去解了。xhr.send("name=root;pwd=123"); //發(fā)送的數(shù)據(jù)}/*function iframeRequest(){var url=$('#url').val();$('#ifm').attr('src',url);}*/function iframeLoad(){console.log(123);}</script> </body> </html>

?頁面效果：報(bào)錯(cuò)是因?yàn)? οnclick="iframeLoad()" 時(shí)，沒有找到JS呢，JS是在下面加載的。

也可以在點(diǎn)submitForm的時(shí)候，再給iframe綁定事件。這樣綁定的時(shí)機(jī)就會(huì)晚一些。這時(shí)就不會(huì)報(bào)錯(cuò)了。頁面效果同上。

views.py

# 基于ModelForm方式來實(shí)現(xiàn) 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):#自定義額外的字段，比如是否要保存一個(gè)月內(nèi)免登陸。is_remember=Ffields.CharField(widget=Fwidgets.CheckboxInput())class Meta:model=models.UserInfo #指去哪個(gè)類里面去獲取字段，以后也可以做增刪改查。fields='__all__' #代指的是所有的field字段#fields=['username'] #還可以是一個(gè)列表，可以選擇要展示哪幾列,只展示username這一列#exclude=['username'] #把username列排除在外了。#labels={'username':'請(qǐng)?zhí)钊胗脩裘?#39;}#help_texts={'username':'請(qǐng)把你的名字寫對(duì)'}#widgets={'username':Fwidgets.Textarea(attrs={'class':'c1'})}error_messages={'__all__':{},'email':{'required':'郵箱不能為空','invalid':'郵箱格式錯(cuò)誤',}}#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()#這個(gè)save實(shí)現(xiàn)的時(shí)候，其實(shí)內(nèi)部包含了2個(gè)步驟。可以拆開。instance=obj.save(False) #什么也沒干instance.save() #只會(huì)保存當(dāng)前這個(gè)類，而不會(huì)保存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中的數(shù)據(jù)取出來return render(request,'user_list.html',{'li':li})def user_edit(request,nid):#獲取當(dāng)前id對(duì)應(yīng)的用戶信息#顯示用戶已經(jīng)存在的數(shù)據(jù)if request.method=='GET':user_obj=models.UserInfo.objects.filter(id=nid).first() #獲取對(duì)象mf=UserInfoModelForm(instance=user_obj) #幫咱們生成標(biāo)簽return render(request, 'user_edit.html',{'mf':mf,'nid':nid})elif request.method=='POST':user_obj = models.UserInfo.objects.filter(id=nid).first() #獲取對(duì)象mf = UserInfoModelForm(request.POST,instance=user_obj) #instance傳進(jìn)來表示更新，不加的話表示新建了一條數(shù)據(jù)。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();"/><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(); //創(chuàng)建XMLHttpRequest對(duì)象var xhr=getXHR(); //為了兼容IE舊版本xhr.open('POST','/ajax_json/',true); //指定用什么形式發(fā)，發(fā)到哪里，是否異步(是)xhr.onreadystatechange=function(){if(xhr.readyState==4){//接收完畢，放到XMLHttprequest對(duì)象里面了var obj=JSON.parse(xhr.responseText);console.log(obj); //這就是我們要拿的返回值}};xhr.setRequestHeader('k1','v1'); //發(fā)送的時(shí)候帶著請(qǐng)求頭，csrf的時(shí)候用。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//設(shè)置請(qǐng)求頭，判斷發(fā)來的請(qǐng)求頭里面，怎么樣把數(shù)據(jù)打包的。這樣后臺(tái)就知道怎么樣去解了。xhr.send("name=root;pwd=123"); //發(fā)送的數(shù)據(jù)}/*function iframeRequest(){var url=$('#url').val();$('#ifm').attr('src',url);}*/function submitForm(){$('#ifm1').load(function(){console.log(123);})}</script> </body> </html>

?頁面效果：

去iframe中獲取用戶數(shù)據(jù)，基于iframe可以返回?cái)?shù)據(jù)也可以拿到數(shù)據(jù)了。

程序粘貼：

views.py

# 基于ModelForm方式來實(shí)現(xiàn) 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):#自定義額外的字段，比如是否要保存一個(gè)月內(nèi)免登陸。is_remember=Ffields.CharField(widget=Fwidgets.CheckboxInput())class Meta:model=models.UserInfo #指去哪個(gè)類里面去獲取字段，以后也可以做增刪改查。fields='__all__' #代指的是所有的field字段#fields=['username'] #還可以是一個(gè)列表，可以選擇要展示哪幾列,只展示username這一列#exclude=['username'] #把username列排除在外了。#labels={'username':'請(qǐng)?zhí)钊胗脩裘?#39;}#help_texts={'username':'請(qǐng)把你的名字寫對(duì)'}#widgets={'username':Fwidgets.Textarea(attrs={'class':'c1'})}error_messages={'__all__':{},'email':{'required':'郵箱不能為空','invalid':'郵箱格式錯(cuò)誤',}}#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()#這個(gè)save實(shí)現(xiàn)的時(shí)候，其實(shí)內(nèi)部包含了2個(gè)步驟。可以拆開。instance=obj.save(False) #什么也沒干instance.save() #只會(huì)保存當(dāng)前這個(gè)類，而不會(huì)保存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中的數(shù)據(jù)取出來return render(request,'user_list.html',{'li':li})def user_edit(request,nid):#獲取當(dāng)前id對(duì)應(yīng)的用戶信息#顯示用戶已經(jīng)存在的數(shù)據(jù)if request.method=='GET':user_obj=models.UserInfo.objects.filter(id=nid).first() #獲取對(duì)象mf=UserInfoModelForm(instance=user_obj) #幫咱們生成標(biāo)簽return render(request, 'user_edit.html',{'mf':mf,'nid':nid})elif request.method=='POST':user_obj = models.UserInfo.objects.filter(id=nid).first() #獲取對(duì)象mf = UserInfoModelForm(request.POST,instance=user_obj) #instance傳進(jìn)來表示更新，不加的話表示新建了一條數(shù)據(jù)。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();"/><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(); //創(chuàng)建XMLHttpRequest對(duì)象var xhr=getXHR(); //為了兼容IE舊版本xhr.open('POST','/ajax_json/',true); //指定用什么形式發(fā)，發(fā)到哪里，是否異步(是)xhr.onreadystatechange=function(){if(xhr.readyState==4){//接收完畢，放到XMLHttprequest對(duì)象里面了var obj=JSON.parse(xhr.responseText);console.log(obj); //這就是我們要拿的返回值}};xhr.setRequestHeader('k1','v1'); //發(fā)送的時(shí)候帶著請(qǐng)求頭，csrf的時(shí)候用。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//設(shè)置請(qǐng)求頭，判斷發(fā)來的請(qǐng)求頭里面，怎么樣把數(shù)據(jù)打包的。這樣后臺(tái)就知道怎么樣去解了。xhr.send("name=root;pwd=123"); //發(fā)送的數(shù)據(jù)}/*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種方法實(shí)現(xiàn)Ajax請(qǐng)求。（原生的，基于jQuery的，基于iframe的偽ajax）哪種情況使用

2.1 如果發(fā)送的是普通數(shù)據(jù)的話---建議使用優(yōu)先順序jQuery，XMLHttprequest，iframe

轉(zhuǎn)載于:https://www.cnblogs.com/momo8238/p/7765450.html

總結(jié)

以上是生活随笔為你收集整理的Day24--Part2-伪Ajax(iframe)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

Ajax
iframe

上一篇：洛谷P1730最小密度路径
下一篇： 20171101从现在开始就请有计划的学