iframe实现伪ajax

数据提交的两种方式：

Form

Ajax

Ajax提交数据的方法：

JS实现

Jquery

“伪”Ajax

　　

"伪"Ajax：

iframe+from实现

　　

示例程序：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    {% load staticfiles %}

    <style>

    </style>

</head>

<body>

    <!--window.location,reload-->

     <script src="{% static '/js/jquery/jquery-3.3.1.js' %}"></script>     <!--引入jquery库。必须放在js文件最前面，避免子模板出现$is not defined问题-->

    <iframe id="iframe" name="ifra" ></iframe>

    <form id="fm" method="POST" action="/ajax.html/" target="ifra">

        {% csrf_token  %}

            <p>用户名：<input type="text" name="user" ></p>

             <p>密码：<input type="password" name="password"></p>

             <a onclick="ajaxsubmit();">提交</a>

    </form>

    <script>

        <!--#当点击a标签的时候给iframe标签绑定onload事件，这时不需要传递this参数-->

        <!--this把iframe标签本身传进去-->

        <!--onload为当数据返回回来自动执行-->

        function ajaxsubmit(){

            document.getElementById('iframe').onload=reloadIframe;

            document.getElementById('fm').submit();

        }

        function reloadIframe()

        {

            <!--#此时this =当前标签-->

            console.log(this);

            console.log(this.contentWindow.document.body.innerHTML);

            <!--this.contentWindow是进入了另一个html文档-->

            <!--this.contentWindow.document.body拿到另一个文档的body元素-->

            <!--this.contentWindow.document.body.innerHTML拿到另一个body元素下的HTML内容-->

　　　　　　　

            var content=console.log($(this).contents().find('body').html());

            <!--var obj=JSON.parse(content);-->

        }

    </script>

</body>

</html>

　

分析：

1."伪"Ajax使用from与iframe实现，注意iframe的name属性和from的target属性的值相同。

2.这里给a标签进行绑定事件，在a标签的事件里给iframe标签绑定事件。

3.iframe绑定的事件为onload，当服务端返回数据的时候，事件才会执行。

4.reloadIframe为iframe的事件函数，当数据返回，肯定要从iframe标签下拿到返回的数据。

5.这里this指当前标签，为iframe标签，注意，不需要人为传递this，如果绑定事件的方式为onload="reloadIframe(this);" function reloadIframe{//具体代码};则需要传递this

6.获取iframe里服务端返回的数据：

普通方法：this.contentWindow.document.body.innerHTML

Jquery：$(this).contents().find('body').html()

7.如果是json数据，需要进行反序列化

JSON.parse(content)

注意：这里为post的方式，get方式：method="GET"

　　

视图函数：　

def ajax(request):

    v1=request.POST

    v2=request.GET

    print(v1)

    print(v2)

    if request.method=="POST":

        return HttpResponse(v1['user']+v1['password'])

    else:return render(request,"ajax.html")

　　

iframe实现伪ajax的更多相关文章

  1. Ajax-02 iframe实现伪“Ajax”

    需求: 用户输入URL,使用iframe将目标URL的内容加载到页面指定位置(局部刷新) <!DOCTYPE html> <html lang="en"> ...

  2. tornado之文件上传的几种形式form,伪ajax(iframe)

    1直接form提交给后台处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  3. 一个伪ajax图片上传代码的例子

    一个伪ajax图片上传实现代码. 复制代码代码如下: <?php  if($_FILES){  ?>  <script>  window.parent.ajaxUploadPi ...

  4. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  5. 手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)

    自动发送  ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...

  6. 33)django-原生ajax,伪ajax

    一:概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作 ...

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

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

  8. 伪AJAX

    <h3>3,伪ajax</h3> <h6>学习iframe(嵌套别人家网站的)</h6> <div> <input id=" ...

  9. 框架----Django之Ajax全套实例（原生AJAX，jQuery Ajax，“伪”AJAX，JSONP，CORS）

    一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

随机推荐

  1. 不想用ssh框架

    学过三遍多的样子,没有感悟到特别多的好处. 现在工作都用,想找一个不用这个的工作就不好找.c的话,觉得没有Java面向对象提炼得好. 不是很明白怎么都用,知道自己不想用.里边太多复杂和要背下来的东西, ...

  2. SQL Server 函数之日期格式化函数

    SQL Server 函数之日期格式化函数 高文龙关注0人评论612人阅读2017-09-23 13:47:07 SQL Server 函数之日期格式化函数 对于一些经常写SQL Server执行语句 ...

  3. VM_Centos7.3_X64_安装Oracle12C 总结笔记

    声明:本文居多内容参考原文来之网络: 一:安装Centos7.3 虚拟机 1:操作系统下载 CentOS 7官方下载地址:https://www.centos.org/download/ 说明:本案例 ...

  4. Confluence 6 从站点首页集中访问面板

    如果你选择设置一个页面为你的站点主页面,但是你还是希望你的用户能够访问 Confluence 的主面板,你可以将主面板的连接添加到应用导航(Application Navigator)中. 希望添加 ...

  5. Confluence 6 升级自定义的站点和空间获得你的自定义布局

    我们建议你在对站点进行布局修改的时候,你需要为你修改的 Confluence 站点或空间布局保留所有的修改记录. 如果没有的话,你应该可以通过下面的办法找到你的自定义修改.这个方法将会把你对全部网站和 ...

  6. try? try! try do catch try 使用详解

    当一个使用一个方法发现后面 throws  说明可能会抛出异常 需要try 进行处理 1  try? 如果解析成功就有值 否则返回nil  (推荐) 2  try! 如果解析成功就有值  否则直接崩溃 ...

  7. Django框架之第二篇

    一.知识点回顾 1.MTV模型 model:模型,和数据库相关的 template:模板,存放html文件,模板语法(目的是将变量如何巧妙的嵌入到HTML页面中). views:视图函数 另加urls ...

  8. MySql在windows上的安装

    知乎安装教程 csdn安装教程 一.官网下载 ZIP Archive 内的软件包,mysql-xxx-win64.zip. 二.新建 MySQL 文件夹,解压缩下载包,进入文件夹(mysql-8.0. ...

  9. Metasploit框架问题

    1.使用nmap 扫描SMB服务漏洞信息 nmap -P0 --script=smb-check-vulns 10.10.15.123 2.sql语句绕过后台 这部分我待会补充 只有尽可能的过滤,没有 ...

  10. poj2836 状态压缩dp

    自己的做法是枚举i,j作为顶点的矩形,然后再更新状态S,但是这种做法是错误的 正解是先把所有矩形对求出来,然后枚举状态S,每个处理每个状态时再枚举已经求出的矩形对,用旧状态更新新状态 #include ...