jQuery load()方法的用法

在 jQuery 中，我們可以使用 load() 方法來通過 Ajax 請求從伺服器中獲取資料，然後把獲取的資料插入到指定的元素中。

語法：

$().load(url, data, fn)

load() 方法有 3 個引數，如表 1 所示。

表 1：load() 方法的 3 個引數
引數	說明
url	必選引數，表示被載入的頁面地址
data	可選引數，表示傳送到伺服器的資料
fn	可選引數，表示請求完成後的回撥函數

注意：由於瀏覽器安全方面的限制，大多數 Ajax 請求遵守“同源策略”。也就說，Ajax 請求無法從不同的域、子域或協定中獲取資料。

一般情況下，load() 方法都是用來載入某一個檔案的內容，例如擴充套件名 txt、html 和 php 的檔案等。為了測試 load() 方法，我們需要在網站根目錄下新建 3 個檔案，分別是：welcome.txt 檔案、content.html 檔案和 test.php 檔案。

welcome.txt 檔案內容如下：
歡迎來到C語言中文網！

content.html 檔案程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>C語言中文網成立於 2012 年初，目前已經運營了將近 8 年，我們致力於分享精品教學，幫助對程式設計感興趣的讀者。我們一直都在堅持的是：認認真真、一絲不苟、以工匠的精神來打磨每一套教學，讓讀者感受到作者的用心，以及默默投入的時間，由衷地心動和點讚。這樣的教學是一件作品，而不是呆板的文字！</div>
</body>
</html>

test.php 檔案程式碼如下：

<?php
    $sum=0;
    for($i=1;$i<=100;$i++) {
        $sum+=$i;
    }
    echo "1+2+3+…+100=".$sum;
?>

舉例：獲取擴充套件名為 txt 的檔案的內容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#wrapper").load("welcome.txt");
        })
    </script>
</head>
<body>
    <div id="wrapper"></div>
</body>
</html>

預覽效果如圖 1 所示。

圖 1：獲取 txt 檔案內容