iframe实现伪ajax
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的更多相关文章
- Ajax-02 iframe实现伪“Ajax”
需求: 用户输入URL,使用iframe将目标URL的内容加载到页面指定位置(局部刷新) <!DOCTYPE html> <html lang="en"> ...
- tornado之文件上传的几种形式form,伪ajax(iframe)
1直接form提交给后台处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 一个伪ajax图片上传代码的例子
一个伪ajax图片上传实现代码. 复制代码代码如下: <?php if($_FILES){ ?> <script> window.parent.ajaxUploadPi ...
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
- 手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)
自动发送 ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...
- 33)django-原生ajax,伪ajax
一:概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作 ...
- 前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式
DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTY ...
- 伪AJAX
<h3>3,伪ajax</h3> <h6>学习iframe(嵌套别人家网站的)</h6> <div> <input id=" ...
- 框架----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_ ...
随机推荐
- Confluence 6 使用 Apache 和 mod_proxy
Atlassian 应用允许用户使用反向代理,但是 Atlassian 并不会为这个功能的配置提供支持.因此,Atlassian 也不能保证能够为这些配置提供任何支持. 如果你在配置上有任何需求,请参 ...
- Confluence 6 为发送邮件配置服务器
配置你的 Confluence 服务器发送电子邮件消息能够允许你的 Confluence 用户: 接受邮件通知和每天更新报表. 通过电子邮件发送一个页面. 你可以通过配置 'From' 字段中的内容来 ...
- Confluence 6 PostgreSQL 创建数据库和数据库用户
一旦你成功的安装了 PostgreSQL 数据库: 创建一个数据库用户,例如 confluenceuser. 你的新用户必须能够 创建数据库对象(create database objects) 和 ...
- eclipse c++11 cmake gnuradio
承接之前的脚本.修改一下这个脚本的代码就可以让eclipse使用C++11了 #!/bin/sh echo "creat_debug for sdk" echo "mkd ...
- Django框架之第二篇
一.知识点回顾 1.MTV模型 model:模型,和数据库相关的 template:模板,存放html文件,模板语法(目的是将变量如何巧妙的嵌入到HTML页面中). views:视图函数 另加urls ...
- Microsoft Visual Studio Community 2017 修改新建项目的默认位置
IDE: Microsoft Visual Studio Community 2017 15.5.2 通过修改默认的设置,在下一次新建项目时,就可以节省一些不必要的操作. 菜单:工具 > 选项, ...
- 原创 《算法》java第四版,标准输入
<算法>学习过程中,在eclipse里调试时,对于官方提供的源码中标准输入的操作,没有搞懂 自己改了一下,直接读取本地测试数据测试数据可在http://algs4.cs.princet ...
- 基于nginx的WebSocket反向代理
系统:windows 版本:nginx 1.4.5 配置内容: location ~ \.do$ { proxy_pass http://192.168.20.102:80 ...
- java用swing画可以行走的乌龟
代码如下: import java.awt.Color;import java.awt.Graphics;import java.awt.event.KeyEvent;import java.awt. ...
- hdfs数据到hive中,以及hdfs数据隐身理解
hdfs数据到hive中: 假设hdfs中已存在好了数据,路径是hdfs:/localhost:9000/user/user_w/hive_g2park/user_center_enterprise_ ...