JavaScript 伪Ajax请求
伪Ajax
通过iframe
以及form
表单,可以实现伪Ajax
的方式。
并且它的兼容性是最好的。
iframe
iframe
标签能够获取一个其他页面的文档内容,这说明它内部肯定是发送了一个请求,并且收到后端的数据展示在页面上。
基于这一点,我们可以让他与form
表单做一个结合使用。
<iframe src="http://www.baidu.com//" frameborder="0"></iframe>
结合使用
首先form
表单中有一个target
属性,我们需要为iframe
取一个名字。并且让target
属性与iframe
做绑定。
至于提交方式与提交的数据,均是form
表单中的内容。
注意:如果要上传文件,一定要指定
enctype
为multipart/form-data
,否则后端Django
不会将文件存放进request.FILES
中。
<iframe name="ajax"></iframe>
<form action="http://127.0.0.1:8000/" method="POST" target="ajax" enctype="multipart/form-data" >
<p><input type="text" name="username"></p>
<p><input type="text" name="password"></p>
<p><input type="file" name="userfile"></p>
<p><button type="submit">提交</button></p>
</form>
def test(request):
if request.method == "POST":
print(request.POST) # <QueryDict: {'username': ['Yunya'], 'password': ['123']}>
print(request.FILES) # <MultiValueDict: {'userfile': [<InMemoryUploadedFile: django-orm单表练习.gif (image/gif)>]}>
return HttpResponse("ok")
else:
print(request.GET)
return render(request,"base.html",locals())
回调函数
现在我们需要为iframe
绑定一个回调函数,当iframe
中有内容时则取出来。
同时我们还要让iframe
的高度为0
,让页面感知不到我们是在用伪Ajax
在发送请求。
<body>
<iframe name="ajax" style="display: none;"></iframe>
<form action="http://127.0.0.1:8000/" method="POST" target="ajax" enctype="multipart/form-data" >
<p><input type="text" name="username"></p>
<p><input type="text" name="password"></p>
<p><input type="file" name="userfile"></p>
<p><button type="submit">提交</button></p>
</form>
</body>
<script>
window.onload = () => {
document.getElementsByName("ajax")[0].addEventListener("load",function(ele){
let result = this.contentWindow.document.body.innerHTML; // 获取iframe中的内容
console.log(result);
})
}
</script>
def test(request):
if request.method == "POST":
print(request.POST) # <QueryDict: {'username': ['Yunya'], 'password': ['123']}>
print(request.FILES) # <MultiValueDict: {'userfile': [<InMemoryUploadedFile: django-orm单表练习.gif (image/gif)>]}>
return HttpResponse("ok")
else:
print(request.GET)
return render(request,"base.html",locals())
后期思路
你可以在后面围绕上面知识点做一个组件。我这里就懒得写了,具体思路如下:
1.使用
Js
创建出iframe
标签,以及form
表单,但是不向body
中进行添加。2.根据参数,来选定
form
中的enctype
。3.根据提交的数据长度,来生成
input
框在form
表单中,并且生成对应的name
及value
。4.根据参数,来设定
form
中的method
以及action
属性。5.自己做一个回调函数
JavaScript 伪Ajax请求的更多相关文章
- 原生javaScript完成Ajax请求
使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...
- 转贴:JavaScript实现Ajax请求简单示例
转至:https://my.oschina.net/u/658145/blog/167651 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...
- javascript版Ajax请求
什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...
- JavaScript原生Ajax请求纯文本数据
源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 前端javascript发送ajax请求、后台书写function小案例
HTML端页面: <td> <input class="pp_text" type="text" name="" valu ...
- javascript原生ajax请求
class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true ...
- JavaScript的Ajax请求示例
//创建XMLHttpRequest对象 var request = false; try { request = new ...
- PHP 判断是否为 AJAX 请求
先说前端使用 jQuery 时怎么区分: jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest 在后端可以 ...
- 前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式
DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTY ...
随机推荐
- elasticsearch java工具类
docker运行elasticsearch docker pull elasticsearch:7.8.1 docker run -p 9200:9200 -p 9300:9300 -e " ...
- servlet的生命周期和工作原理介绍
一.servlet生命周期 Servlet生命周期分为三个阶段: 1)初始化阶段: 调用init()方法 2)响应客户请求阶段:调用service()方法 3)终止阶段:调用destroy()方法 T ...
- 直播报名 | 8.29 Kylin Meetup – 来聊聊云原生
云原生的巨浪正在席卷全球的软件产业,包括开源和商业软件.Apache Kylin 正在为此而积极准备着:基于新的计算和存储引擎,即将发布的 Kylin 4.0 将实现真正的计算和存储分离,减小运维难度 ...
- golang 开发 Struct 转换成 map 两种方式比较
原文链接:https://www.jianshu.com/p/81c4304f6d1b 最近做Go开发的时候接触到了一个新的orm第三方框架gorose,在使用的过程中,发现没有类似beego进行直接 ...
- Linux高频操作
常用linux命令 查看文件.文件夹大小 du -hs <file/dir> 同时输出到控制台和文件 ./<program> 2>&1 | tee <log ...
- 四则运算(C语言实现)
四则运算(c语言实现) 合伙人:魏甫——3118004973 ,温钦益——3118004975 https://github.com/iamdate/work/tree/master 一.项目及其要 ...
- Reinforcement Learning, Fast and Slow
郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! 1 DeepMind, London, UK2 University College London, London, UK3 Prince ...
- 传统servelt项目之分页操作
需求说明: • 演示最终分页效果 • 提供分页素材 • 分页的作用 • 数据量大,一页容不下 • 后台查询部分数据而不是全部数据 • 降低带宽使用,提高访问速度 • 分页的实现思路 • ...
- 做SEO必须制定超越竞争对手网站的方案
http://www.wocaoseo.com/thread-131-1-1.html 从开始终学习SEO技术,到现在半年过去了,其间也做了几个站,可是赚钱的并不多,有流量的也不多,虽然说 ...
- 设计模式C++模板(Template)模式
设计模式C++描述----02.模板(Template)模式(转载) 一. 问题 在面向对象系统的分析与设计过程中经常会遇到这样一种情况:对于某一个业务逻辑(算法实现)在不同的对象中有不同的细节实现, ...