脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery中Ajax的load方法详解

jQuery中Ajax的load方法详解

 更新时间：2015年01月14日 08:59:12   投稿：hebedich  
本文重点个大家讲解了几个jQuery中ajax的load()方法的使用实例，load()方法是jQuery中最为简单和常用的Ajax方法，能远程载入HTML代码并插入DOM中

先来看一个Ajax例子

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText"></div>
</body>
<script type="text/javascript">
    function Ajax() {
        var xmlHttpReq = null;//声明一个空对象用来装入XMLHttpRequest对象
        if(window.ActiveXObject) {
            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
        } else if(window.XMLHttpRequest) {//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
            xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest对象
        }
        if(xmlHttpReq != null) {
            xmlHttpReq.open("GET", "test.jsp", true);//调用open()方法并采用异步方式
            xmlHttpReq.onreadystatechange = RequestCallBack;//设置回调函数
            xmlHttpReq.send(null);//因为使用get方式提交，所以可以使用null参调用
        }

        function RequestCallBack() {//一旦readyState值改变，将会调用这个函数}
            if(xmlHttpReq.readyState == 4) {
                if(xmlHttpReq.status == 200) {
                    //将xmlHttpReq.responseText的值赋予id为resText的元素
                    document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
                }
            }
        }
    }

</script>
</html>

test.jsp的内容：

复制代码 代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%out.println("Hello Ajax!");%>

下面来看下jQuery中的Ajax

1.load()

　　load()方法是jQuery中最为简单和常用的Ajax方法，能远程载入HTML代码并插入DOM中。

远程HTML代码：

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="comment">
    <h6>张三:</h6>
    <p class="para">沙发.</p>
</div>
<div class="comment">
    <h6>李四:</h6>
    <p class="para">板凳.</p>
</div>
<div class="comment">
    <h6>王五:</h6>
    <p class="para">地板.</p>
</div>
</body>
</html>

load()载入HTML

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">已有评论</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $("#resText").load("test.html");
        });
    })
    /**
     * jQuery中的Ajax
     *
     * jQuery对Ajax操作进行了封装，
     *  在jQuery中$.ajax()方法属于最底层的方法，
     *  第2层是load()、$.get()、$.post()方法
     *  第3层是$.getScript()和$.getJSON()方法
     *
     *
     * load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。
     *      load(url [, data] [, callback])
     *
     *      url              String      请求HTML界面的URL地址
     *      data(可选)        Object      发送至服务器的key/value数据
     *      callback(可选)    Function    请求完成时的回调函数，无论请求成功或失败
     * */

</script>
</html>

load()载入筛选后的HTML文档

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">已有评论</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $("#resText").load("test.html .para");
        });
    })
    /**
     * 筛选载入的HTML文档
     *
     * load()方法的URL参数的语法结构为："url selector"，注意URL和选择器之间有一个空格
     *
     * load()方法的传递方式根据参数data来自动指定。
     *      如果没有参数传递，则采用GET方式进行传递；
     *      反之，则会自动转换为POST传递
     *
     * **/
</script>
</html>

load()方法---回调函数

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">已有评论</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $("#resText").load("test.html .para", function (responseText, textStatus, XMLHttpRequest) {
                alert($(this).html());
                alert(responseText);//请求返回的内容
                alert(textStatus);//请求状态：success、error、notmodified、timeout
                alert(XMLHttpRequest);//XMLHttpRequest对象
            });
        });
    })
    /**
     *
     * load()方法的回调参数
     *
     * **/
</script>
</html>

END

以上就是本文的全部内容了，希望对大家能有所帮助。

您可能感兴趣的文章:

相关文章

  • jquery一键控制checkbox全选、反选或全不选

    jquery一键控制checkbox全选、反选或全不选

    这篇文章主要为大家详细介绍了jquery一键控制checkbox全选、反选或全不选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • jQuery模拟物体自由落体运动(附演示与demo源码下载)

    jQuery模拟物体自由落体运动(附演示与demo源码下载)

    这篇文章主要介绍了jQuery模拟物体自由落体运动的方法,并附带了效果演示与demo源码下载,可真是模拟出球体自由落体运动及动能损耗的运动过程,需要的朋友可以参考下
    2016-01-01
  • 基于jquery实现简单轮播图效果

    基于jquery实现简单轮播图效果

    这篇文章主要为大家详细介绍了基于jquery实现简单轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • jquery操作checkbox火狐下第二次无法勾选的解决方法

    jquery操作checkbox火狐下第二次无法勾选的解决方法

    这篇文章主要介绍了jquery操作checkbox火狐下第二次无法勾选问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JQuery困惑—包装集 DOM节点

    JQuery困惑—包装集 DOM节点

    我使用了JQuery进行了一段时间的前端开发，它让我从选择需要操作的元素痛苦中解放出来，因为提供的选择功能是如此的强大。 同时在开发过程中我被一个问题困惑了很久，也许在别人看来这根本不是问题！
    2009-10-10
  • jQuery实现获取动态添加的标签对象示例

    jQuery实现获取动态添加的标签对象示例

    这篇文章主要介绍了jQuery实现获取动态添加的标签对象,涉及jQuery针对页面元素的动态添加、元素获取与事件响应相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • jQuery 使用手册(四)

    jQuery 使用手册(四)

    jQuery 使用手册，大家可以耐心的看完，就基本上入门了。
    2009-09-09
  • jquery模拟按下回车实现代码

    jquery模拟按下回车实现代码

    今天要实现一个回车事件，一开始用了 js 的方法，怎么都不行，原来JQuery有点不同于JS的，而且比起JS简单多了
    2011-09-09
  • jQuery实现动态向上滚动

    jQuery实现动态向上滚动

    这篇文章主要为大家详细介绍了jQuery实现动态向上滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    文字逐行或多行滚动跑马灯插件，基于Jquery。命名为Jquery.RollTitle。支持在一个页面声明多个滚动区 (就为了要这点才写了这个)
    2010-07-07

最新评论