伪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请求的更多相关文章

  1. 原生javaScript完成Ajax请求

    使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...

  2. 转贴：JavaScript实现Ajax请求简单示例

    转至:https://my.oschina.net/u/658145/blog/167651 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...

  3. javascript版Ajax请求

    什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...

  4. JavaScript原生Ajax请求纯文本数据

    源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  5. 前端javascript发送ajax请求、后台书写function小案例

    HTML端页面: <td> <input class="pp_text" type="text" name="" valu ...

  6. javascript原生ajax请求

    class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true ...

  7. JavaScript的Ajax请求示例

    //创建XMLHttpRequest对象              var request = false;            try {                request = new ...

  8. PHP 判断是否为 AJAX 请求

    先说前端使用 jQuery 时怎么区分: jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest 在后端可以 ...

  9. 前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式

    DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTY ...

随机推荐

  1. IT技术人，“三十而已”

    最近电视剧<三十而已>热播,我家的电视机自然也是被霸屏,我还是跟着妹纸看了看,开头和结局完整看完,中间看了一点,大部分都是在微信公众号上通过别人的文章看完的.我个人也已经30+了,今天也和 ...

  2. 阿里P8架构师大话设计模式，体会乐与怒的程序人生中值得回味一幕

    本书特色 本书有两个特色,第一特色是重视过程.看了太多的计算机编程类的图书,大多数书籍都是集中在讲授优秀的解决方案或者一个完美的程序样例,但对这些解决方案和程序的演变过程却重视不够,好书之所以好,就是 ...

  3. 30分钟闲置服务器建站(gitlab为例)

    前言 最近博主的阿里云主机又到了续费的时候了,刚买云主机的时候那是各种优惠各种打折,续费的时候只能当孙子了. 为了节省开支,又保证高性能的前提下,买了台10代NUC,内存和ssd自选,搭建一台个人服务 ...

  4. 5分钟快速了解MySQL索引的各种类型

    文章持续更新,微信搜索「万猫学社」第一时间阅读. 关注后回复「电子书」,免费获取12本Java必读技术书籍. 什么是索引? 索引是数据库存储引擎用于快速查找到指定数据的一种数据结构. 可以用新华字典做 ...

  5. kubectl 安装

    下载kubectl二进制文件curl -LO https://storage.googleapis.com/kubernetes-release/release/v1.10.0/bin/linux/a ...

  6. 个人项目WC.exe Node.js+electron实现

    前言 实现语言:Javascript 编译工具:webstorm GitHub:https://github.com/NPjuan/WC.git 项目要求 wc.exe 是一个常见的工具,它能统计文本 ...

  7. 使用C#对华为IPC摄像头二次开发（一）

    开发环境: 操作系统:Win10 x64专业版2004 开发工具:VS2019 16.7.2 目标平台:x86 首先去下载IPC SDK(点击下载,需要华为授权账户.) 新建一个WPF的项目,Fram ...

  8. Spring Security 入门学习--数据库认证和授权

    首先是使用的SpringBoot框架 基础需要的pom以来如下,基础的springboot项目的创建就不一一赘述了. <!--spring web--> <dependency> ...

  9. （几乎）完美实现 el-table 列宽自适应

    背景 Element UI 是 PC 端比较流行的 Vue.js UI 框架,它的组件库基本能满足大部分常见的业务需求.但有时候会有一些定制性比较高的需求,组件本身可能没办法满足.最近在项目里就碰到了 ...

  10. 基于Appium的UI自动化测试

    为什么需要UI自动化测试 移动端APP是一个复杂的系统,不同功能之间耦合性很强,很难仅通过单元测试保障整体功能.UI测试是移动应用开发中重要的一环,但是执行速度较慢,有很多重复工作量,为了减少这些工作 ...