欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery中Ajax的load方法詳解

 更新時間：2015年01月14日 08:59:12   投稿：hebedich  
本文重點個大家講解了幾個jQuery中ajax的load()方法的使用實例，load()方法是jQuery中最為簡單和常用的Ajax方法，能遠程載入HTML代碼并插入DOM中

先來看一個Ajax例子

復(fù)制代碼 代碼如下:

<!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);//調(diào)用open()方法并采用異步方式
            xmlHttpReq.onreadystatechange = RequestCallBack;//設(shè)置回調(diào)函數(shù)
            xmlHttpReq.send(null);//因為使用get方式提交，所以可以使用null參調(diào)用
        }

        function RequestCallBack() {//一旦readyState值改變，將會調(diào)用這個函數(shù)}
            if(xmlHttpReq.readyState == 4) {
                if(xmlHttpReq.status == 200) {
                    //將xmlHttpReq.responseText的值賦予id為resText的元素
                    document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
                }
            }
        }
    }

</script>
</html>

test.jsp的內(nèi)容：

復(fù)制代碼 代碼如下:

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

下面來看下jQuery中的Ajax

1.load()

　　load()方法是jQuery中最為簡單和常用的Ajax方法，能遠程載入HTML代碼并插入DOM中。

遠程HTML代碼：

復(fù)制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="comment">
    <h6>張三:</h6>
    <p class="para">沙發(fā).</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

復(fù)制代碼 代碼如下:

<!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      發(fā)送至服務(wù)器的key/value數(shù)據(jù)
     *      callback(可選)    Function    請求完成時的回調(diào)函數(shù)，無論請求成功或失敗
     * */

</script>
</html>

load()載入篩選后的HTML文檔

復(fù)制代碼 代碼如下:

<!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參數(shù)的語法結(jié)構(gòu)為："url selector"，注意URL和選擇器之間有一個空格
     *
     * load()方法的傳遞方式根據(jù)參數(shù)data來自動指定。
     *      如果沒有參數(shù)傳遞，則采用GET方式進行傳遞；
     *      反之，則會自動轉(zhuǎn)換為POST傳遞
     *
     * **/
</script>
</html>

load()方法---回調(diào)函數(shù)

復(fù)制代碼 代碼如下:

<!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);//請求返回的內(nèi)容
                alert(textStatus);//請求狀態(tài)：success、error、notmodified、timeout
                alert(XMLHttpRequest);//XMLHttpRequest對象
            });
        });
    })
    /**
     *
     * load()方法的回調(diào)參數(shù)
     *
     * **/
</script>
</html>

END

以上就是本文的全部內(nèi)容了，希望對大家能有所幫助。

相關(guān)文章

  • 關(guān)于動態(tài)生成dom綁定事件失效的原因及解決方法

    關(guān)于動態(tài)生成dom綁定事件失效的原因及解決方法

    下面小編就為大家?guī)硪黄P(guān)于動態(tài)生成dom綁定事件失效的原因及解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • 使用jQuery的ajax功能實現(xiàn)的RSS Reader 代碼

    使用jQuery的ajax功能實現(xiàn)的RSS Reader 代碼

    Rss閱讀器挺不錯的。我覺得如果在igoogle或是dropthings這種形式的portal下來放很多RSS模塊顯示自己每天需要關(guān)注的信息那將會減少大家很多的打開瀏覽器和輸入網(wǎng)址的時間。
    2009-09-09
  • jQuery動畫效果圖片輪播特效

    jQuery動畫效果圖片輪播特效

    這篇文章主要介紹了jQuery動畫效果圖片輪播特效，圖片可以進行左右輪播，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-01-01
  • Jquery實現(xiàn)縱向橫向菜單

    Jquery實現(xiàn)縱向橫向菜單

    這篇文章主要介紹了Jquery實現(xiàn)縱向橫向菜單的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-01-01
  • 一款基jquery超炫的動畫導(dǎo)航菜單可響應(yīng)單擊事件

    一款基jquery超炫的動畫導(dǎo)航菜單可響應(yīng)單擊事件

    。這款導(dǎo)航菜單，初始時頁面中間一個按鈕，單擊按鈕，菜單從左側(cè)飛入頁中。再次單擊按鈕，導(dǎo)航飛入左側(cè)消息
    2014-11-11
  • 6款新穎的jQuery和CSS3進度條插件推薦

    6款新穎的jQuery和CSS3進度條插件推薦

    進度條和Loading加載動畫在當今的網(wǎng)頁功能中顯得越來越重要了，于是接下來為大家推薦幾款比較新穎進度條插件,感興趣的你可以參考下希望可以幫助到你
    2013-03-03
  • jQuery頭像裁剪工具jcrop用法實例(附演示與demo源碼下載)

    jQuery頭像裁剪工具jcrop用法實例(附演示與demo源碼下載)

    這篇文章主要介紹了jQuery頭像裁剪工具jcrop用法,結(jié)合實例形式分析了jQuery頭像裁剪工具jquery.jcrop.js具體使用技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下
    2016-01-01
  • jQuery獲取選中單選按鈕radio的值

    jQuery獲取選中單選按鈕radio的值

    本文給大家分享兩段實例代碼給大家講解jquery獲取選中單選按鈕radio的值，非常不錯，具有參考借鑒價值，一起看看吧
    2016-12-12
  • jquery獲取及設(shè)置outerhtml的方法

    jquery獲取及設(shè)置outerhtml的方法

    這篇文章主要介紹了jquery獲取及設(shè)置outerhtml的方法,實例分析了jQuery實現(xiàn)針對outerhtml操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • jquery彩色投票進度條簡單實例演示

    jquery彩色投票進度條簡單實例演示

    這篇文章向大家推薦了一個jquery彩色投票進度條簡單實例演示，詳細介紹了如何制作進度條的步驟，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2015-11-11

最新評論