zoukankan      html  css  js  c++  java

  • jQuery ajax的load()加载页面方法

    [导读] 在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别，但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦。 load()方法默认使用 GET

     

    　　在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别，但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦。

    load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式.

    - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector", 默认的选择器是"body>*".

    讲解:

    　　load是最简单的Ajax函数, 但是使用具有局限性:

    　　1.它主要用于直接返回HTML的Ajax接口 
    　　2.load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中, 即使设置了回调函数也不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:

    load()函数:

    函数介绍：load(url, [data], [callback]) 返回值:jQuery

    参数说明：

    url:待装入 HTML 网页网址。

    data:（可选参数）发送至服务器的 key/value 数据。

    callback:（可选参数）载入成功时回调函数。

    下面进行实例演示：

    首先建立需要加载的test.html文件：

     代码如下 复制代码


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ajax演示</title>
    </head>
    <body>
    php点点通（www.php100.com）,关注php开发，提供专业web开发教程!
    </body>
    </html>

    然后建立ajax.html文件，记得引入jquery。

     代码如下 复制代码


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
    <script>
     $(document).ready(function(){
      $("#btn").click(function(){
       $("#result").load("test.html",function(responseText,textStatus){
        $("#display").append("<hr>responseText:"+responseText);
        $("#display").append("<hr>textStatus:"+textStatus);
       });  
      });
     });
    </script>
    </head>
    <body>
    <input type="button" value="测试" id="btn" />
    <h2>显示的内容如下：</h2>
    <div id="result"></div>
    <h2>结果：</h2>
    <div id="display"></div>
    </body>
    </html>

    上面的示例演示了如何使用Load方法.

    提示:我们要时刻注意浏览器缓存,  当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.

    提示: 当在url参数后面添加了一个空格, 比如"  "的时候, 会出现"无法识别符号"的错误, 请求还是能正常发送. 但是无法加载HTML到DOM. 删除后问题解决.
  • 相关阅读:
    多态
    扩展方法
    git 新账户链接新仓库地址
    获取数据类型
    解构赋值
    var let const 无关键字定义变量
    http
    onmouseover、onmouseout、onmouseenter、onmouseleave
    setInterval、setTimeout、requestAnimationFrame
    vue的prop父子组件传值
  • 原文地址：https://www.cnblogs.com/lxf1016/p/4698672.html
Copyright © 2011-2022 走看看