需求：

　　用户输入URL，使用iframe将目标URL的内容加载到页面指定位置（局部刷新）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用iframe局部刷新</title>

</head>

<body>

<div>

    <p>请输入要加载的地址:<span id="currentTime"></span></p>

    <p>

        <input id="url" type="text">

        <input type="button" value="刷新" onclick="LoadPage();">

    </p>

</div>

<div>

    <h3>加载页面位置：</h3>

    <iframe id="iframePosition" style="width:100%;height: 500px;"></iframe>

</div>

<script>

    window.onload = function () {

        var myDate = new Date();

        document.getElementById('currentTime').innerText = myDate.getTime();

    };

    function LoadPage() {

        var targetUrl = document.getElementById('url').value;

        document.getElementById('iframePosition').src = targetUrl;

    }

</script>

</body>

</html>

Ajax-02 iframe实现伪“Ajax”的更多相关文章

  1. iframe实现伪ajax

    iframe实现伪ajax 数据提交的两种方式: Form Ajax Ajax提交数据的方法: JS实现 Jquery “伪”Ajax "伪"Ajax: iframe+from实现 ...

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

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

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

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

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

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

  5. 伪ajax上传文件

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

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

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

  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. js function,prototype,sub.

    Ojbect 和Function 与普通函数和实例对象 1.实例对象的proto 指向构造函数的原型对象 2.实例对象的proto 指向Ojbect的原型 3.所有函数的proto 都指向Functi ...

  2. DRF(1) - REST、DRF(View源码解读、APIView源码解读)

    一.REST 1.什么是编程? 数据结构和算法的结合. 2.什么是REST? 首先回顾我们曾经做过的图书管理系统,我们是这样设计url的,如下: /books/ /get_all_books/ 访问所 ...

  3. 通过文件对照工具Merge数据库

    项目分成线下开发版.线上測试版.线上生产版,因此相应有三个数据库. 对于一些静态数据.经常须要同步.改动了线下的开发版本号,同一时候也须要更新线上的測试版和线上生产版数据库,有时候线上的一些数据库改动 ...

  4. 在Centos上打Preempt-rt实时补丁（续）

    经过上一篇,发现2.6.31版本的补丁不能正常运行(还未找到原因),现改用2.6.33版本: kernel:linux-2.6.33.9 patch:patch-2.6.33.9-rt 解压并打好补丁 ...

  5. selenium的下拉选择框

    今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

  6. Java并发之——线程池

    一. 线程池介绍 1.1 简介 线程池是一种多线程处理形式,处理过程中将任务添加到队列,然后在创建线程后自动启动这些任务.线程池的基本思想还是一种对象池的思想,开辟一块内存空间,里面存放了众多(未死亡 ...

  7. CSS小知识---回到顶部

    所需js文件 <script type="text/javascript" src="js/jquery-1.11.3.js"></scrip ...

  8. IO 复习笔记

    输入流,从源到流中:输出流,从流到目的地. 1. 操作文件:     1).写入:FileOutputStream或者FileWriter     2).读取:FileInputStream或者Fil ...

  9. jst格式化日期

    jsp页面需引入fmt标签:<taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"> ...

  10. input-file 部分手机不能拍照问题

    曾经遇到一个需求,用户拍身份证上传验证, 然后我卡在了拍照这个点上. 最初采用的是微信的 api,wx.chooseImage, 但随后发现,返回的是一种只有微信才能预览的 url 格式, 但验证是要 ...