jquery-AJAX

時間 2019-11-25
標籤 jquery ajax 欄目 JQuery 简体版
原文原文鏈接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery-AJAX</title>
        <script src="../js/jquery-1.4.2.js"></script>
        <script src="../js/jquery-1.8.3.js"></script>
        <script>
            /*
             * jQuery load() 方法
             * jQuery load() 方法是簡單但強大的 AJAX 方法。
             * load() 方法從服務器加載數據，並把返回的數據放入被選元素中
             * 
             * 
             * 語法：$(selector).load(URL,data,callback);
             * 必需的 URL 參數規定您但願加載的 URL。
             * 可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
             * 可選的 callback 參數是 load() 方法完成後所執行的函數名稱。
             * 
             * 
             * 這是示例文件（"demo_test.txt"）的內容：
             * <h2>jQuery and AJAX is FUN!!!</h2>
             * <p id="p1">This is some text in a paragraph.</p>
             * 
             * 下面的例子會把文件 "demo_test.txt" 的內容加載到指定的 <div> 元素中：
             */
            $(document).ready(function(){
                $("#btn1").click(function(){
                  $("#test").load("demo_test.txt");
                });
                /*
                 * 也能夠把 jQuery 選擇器添加到 URL 參數。
                 * 下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中：
                 */
                $("#btn2").click(function(){
                    $("#test").load("demo_test.txt #p1");
                });
                
                
                
                
                
                /*
                 * 可選的 callback 參數規定當 load() 方法完成後所要容許的回調函數。回調函數能夠設置不一樣的參數：
                 * responseTxt - 包含調用成功時的結果內容
                 * statusTXT - 包含調用的狀態
                 * xhr - 包含 XMLHttpRequest 對象
                 * 下面的例子會在 load() 方法完成後顯示一個提示框。若是 load() 方法已成功，則顯示「外部內容加載成功！」，而若是失敗，則顯示錯誤消息：
                 */
                $("#btn3").click(function(){
                    $("#test").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
                        if(statusTxt=="success")
                          alert("外部內容加載成功！");
                          if(statusTxt=="error")
                            alert("Error: "+xhr.status+": "+xhr.statusText);
                    });
                });
                
                
            });
        </script>
    </head>
    <body>
        <h3 id="test">請點擊下面的按鈕，經過 jQuery AJAX 改變這段文本。</h3>
        <button id="btn1" type="button">得到外部的內容</button>
        <button id="btn2" type="button">得到外部內容2</button>
        <button id="btn3" type="button">得到外部內容3</button>
    </body>
</html>
相關標籤/搜索
jqueryajax
jqueryajax++servlet+json
JQuery
Ajax
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。