伪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 ...

随机推荐

python设计模式之命令模式
python设计模式之命令模式现在多数应用都有撤销操作.虽然难以想象,但在很多年里,任何软件中确实都不存在撤销操作.撤销操作是在1974年引入的,但Fortran和Lisp分别早在1957年和195 ...
MapReduce之MapJoin案例
@ 目录使用场景优点具体办法:采用DistributedCache 案例需求分析代码实现使用场景 Map Join 适用于一张表十分小.一张表很大的场景. 优点思考:在Reduce 端处 ...
开发过程中遇到的-npm加载进node_modules里的文件怎么修改
来源:https://juejin.im/post/5ec381215188256d776342cd https://mp.weixin.qq.com/s?__biz=MzUzNjk5MTE1OQ== ...
【接口自动化】Python+Requests接口自动化测试框架搭建【一】
公司项目启用新框架,前后端分离,所以接口测试成为测试工作中不可缺失的一个环节,现在将从0开始搭建接口自动化测试框架的路程,一步步记录下来. 开发语言我们采用Python+第三方库Requests,测试 ...
openvswitch 流表测试 ovs-appctl
[root@ostack170 ~]# ovs-appctl ofproto/trace br-mirror in_port=,dl_vlan=,dl_src=:ea:cb:5d:e4:ee,dl_d ...
Sqlalchemy 事件监听与初始化
sqlalchemy不仅仅能自动创建数据库,更提供了其他更强大的功能,今天要介绍的就是sqlalchemy中的事件监听,并将其应用到数据库的初始化中. 需求:当插入设置password字段时,自动加密 ...
第1篇 Scrum冲刺博客
一.Alpha阶段各成员任务梁天龙任务名称预计工时编辑历史记录 2 登陆按键设计 3 考勤记录页面 2 人数记录页面 2 学习课程页面 4 建议页面 2 黄岳康任务名称 ...
SpringBoot系列——MyBatis-Plus整合封装
前言 MyBatis-Plus是一款MyBatis的增强工具(简称MP),为简化开发.提高效率,但我们并没有直接使用MP的CRUD接口,而是在原来的基础上封装一层通用代码,单表继承我们的通用代码,实现 ...
快醒醒，C# 9 中又来了一堆关键词 init,record,with
一:背景 1. 讲故事 .NET5 终于在 2020-08-25 也就是前天发布了第八个预览版,这么多的预览版搞得我都麻木了,接踵而来的就是更多的新特性加入到了 C# 9 中,既然还想呆在这条船上,得 ...
题解 P2426 【删数】
洛谷题目传送门一眼看去:区间DP 数据范围:三重循环好了不装B了,开始说正事这题非常明显是区间DP. 按照惯例,先定义状态. 分析题目,发现除了区间左端点和右端点之外,什么也不需要加进状态里.因 ...

JavaScript 伪Ajax请求