jQuery中Ajax的load方法详解

先来看一个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

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

赞 (0)

相关推荐

  • JSP中的include有几种形式？都有什么区别？

    JSP中的include有哪些?有什么区别? 1.JSP中的include有哪些 (1)<%@include file="" %> (2)<jsp:include page="" flush="true"/> 2.两者区别 (1)前者是指示元素,后者是行为元素 (2)前者合成一个页面,后者合成一个文件后被JSP容器转化成Servlet

  • 详谈jQuery.load()和Jsp的include的区别

    1.jqueryObj.load() load()方法通过ajax获取服务端数据,并将放回数据放置到jqueryObj对象下. load(url,data,function(response,status,xhr) 参数 描述 url 规定要将请求发送到哪个 URL. data 可选.规定连同请求发送到服务器的数据. function(response,status,xhr) 可选.规定当请求完成时运行的函数. 额外的参数: response - 包含来自请求的结果数据 status - 包含请

  • JSP中include指令和include行为的区别

    < %@ include file=" "%> < jsp:include page=" " flush="true"/> 前者是指令元素.后者是行为元素.具体它们将在何处用?如何用及它们有什么区别?这应该是很多人看到它都会想到的问题.下面一起来看看吧. 通常当应用程序中所有的页面的某些部分(例如标题.页脚和导航栏)都相同的时候,我们就可以考虑用include.具体在哪些时候用< %@ include file=&q

  • JSP下动态INCLUDE与静态INCLUDE的区别分析

    动态INCLUDE     用jsp:include动作实现 <jsp:include page="included.jsp" flush="true" />它总是会检查所含文件中的变化,适合用于包含动态页面,并且可以带参数. 静态INCLUDE    用include伪码实现,定不会检查所含文件的变化,适用于包含静态页面<%@ include file="included.htm" %> ================

  • 用Jquery.load载入页面实现局部刷新

    因为开始不懂Jquery,一直想用jquery.load的方法载入新的页面,以实现局部刷新,结果发现载入进来的页面与原来单独的页面不一样,样式没了,后来在网上查了一下,发现了解决办法,这是别人的回答: 是这样的,如果不过滤掉一些内容的话,直接加载,会使页面混乱的,比如新的页面也存在<body>标签,加载进来后,一个页面就会存在两个<body>标签是不规范的的HTML.这个是在jquery.load()函数中规定的.一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添

  • jQuery中Ajax的load方法详解

    先来看一个Ajax例子 复制代码 代码如下: <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title> </head> <body> <input type="button" value="Ajax提交" onc

  • jQuery中ajax的load()方法用法实例

    本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素. 语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.

  • jQuery中deferred对象使用方法详解

    在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的回调函数.同时,还改写了ajax方法,现在的ajax方法返回的是一个deferred对象. 那就来看看deferred对象的用法. 1.ajax的链式回调 // ajax方法返回的是一个deferred对象,可以直接使用链式写法 $.ajax('test.json').done(function(resp){ // done 相当于success回调,其中默认的参数为success回调的

  • jQuery中ajax的load()与post()方法实例详解

    本文实例讲述了jQuery中ajax的load()与post()方法.分享给大家供大家参考,具体如下: 一.load()方法 在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦. load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式. 传递附加参数时自动转换为 POST 方式.jQuery 1.2 中,可以指定

  • jQuery中DOM 属性使用实例详解下篇

    目录 DOM属性(下) .html() .val() .attr() .removeAttr() DOM属性(下) .html() 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取. $('div.demo-container').html(); html()方法还可以设置每一个匹配元素的html内容. 我们可以使用 .html() 来设置元素

  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown(); 2.  keyup();  3.  keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按

  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (

  • jQueryUI中的datepicker使用方法详解

    jQueryUI中的datepicker使用方法详解

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 之前做的一个排班考勤系统,跟时间打交道较多,对时间控件做过一些对比,觉得jqueryUI里的这个datepicker更为实用,下面抽点时间给大家整理,方便以后查阅,同时也希望能帮助到大家! 1,引入js,css <link rel="stylesheet" href="http://code.

  • jQuery中DOM 属性使用实例详解上篇

    目录 DOM属性(上) .addClass() .removeClass() .toggleClass() .hasClass() DOM属性(上) .addClass() 为每个匹配的元素添加指定的样式类名 值得注意的是这个方法不会替换一个样式类名.它只是简单的添加一个样式类名到元素上. 对所有匹配的元素可以一次添加多个用空格隔开的样式类名, 像这样: $("p").addClass("myClass yourClass"); .addClass() 方法允许我们

  • python编程之requests在网络请求中添加cookies参数方法详解

    哎,好久没有学习爬虫了,现在想要重新拾起来.发现之前学习爬虫有些粗糙,竟然连requests中添加cookies都没有掌握,惭愧.废话不宜多,直接上内容. 我们平时使用requests获取网络内容很简单,几行代码搞定了,例如: import requests res=requests.get("https://cloud.flyme.cn/browser/index.jsp") print res.content 你没有看错,真的只有三行代码.但是简单归简单,问题还是不少的. 首先,这

随机推荐