使用 AJAX/Jquery 調用外部頁面並將動態內容加載到 DIV 中

Question

嗯，我知道有一種方法可以使用 Ajax 調用和加載函數更改同一頁面內的內容（我的示例頁面 a）
我正在尋找的是，有沒有辦法調用外部頁面並將動態內容加載到該外部頁面上的選定 div。 我想可以使用 HTTP 請求方法，但我真的是個菜鳥。

好的，我有一個頁面（附圖片）
在此處輸入圖片說明

單擊特定 id 時，ajax 將內容加載到“結果”div 中
這是ajax腳本和我到目前為止的html。 這在“頁面 a”本身的結果 div 上完美加載。

<a href="#" id="one" /><br>
<a href="#" id="two" /><br>
<a href="#" id="three" /><br>
<div id="result"  class="functions"></div>

    $.ajaxSetup({
        cache: false
    });
    var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";

    $("#one").click(function () {
    var loadUrl = "content.php";
    $("#result").html(ajax_load).load(loadUrl);
    });

    $("#two").click(function () {
    var loadUrl = "content1.php";
    $("#result").html(ajax_load).load(loadUrl);
    });

    $("#three").click(function () {
    var loadUrl = "content2.php";
    $("#result").html(ajax_load).load(loadUrl);
    });

所以查詢是，我有“頁面 b”和某些按鈕，在單擊按鈕時，我想加載“頁面 a”並將所選內容加載到結果 DIV。
在此處輸入圖片說明

這個概念是，在頁面 b 上，單擊 id，它在新選項卡中加載頁面 a 並在“結果”div 上加載所選內容。 兩個頁面都在同一台服務器上
非常感謝任何幫助或提示。 謝謝。

Answer 1

本教程： https : //css-tricks.com/rethinking-dynamic-page-replacing-content/是使用 AJAX/Jquery 將動態內容加載到 DIV 中的最佳方式，但對代碼進行了一些更改：

主腳本.js

$(document).ready(function(){
    $('.ajax').ajax();
});

$.fn.ajax = function(){
    $(function(){
        if (Modernizr.history){             
            $("#wrapper").on("click", ".ajax", function(){
                var loadLink = $(this).attr("href");
                history.pushState(null, null, loadLink);
                loadContent(loadLink);
                return false;
            });
            function loadContent(href){
                $('#load-here').fadeOut(50, function(){                     
                    $('#loader').show();
                    $(this).load(href + " #load-here ", { func: "getNameAndTime" }, function(){
                        $('#loader').hide();
                        $('#load-here').fadeIn(50);
                        console.log(href);
                    });
                });
            }
            $(window).bind("popstate", function(){
                loadLink = location.pathname.replace(/^.*[\\\/]/, '');
                loadContent(loadLink);
            });
        }
    });
}

和index.html代碼：

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/script.js></script>
<script src="http://sudojesse.github.io/dynamic-page/js/modernizr.js"></script>
</head>

<body>

<div id="wrapper">

<header>
<nav>
  <ul class="group">
    <li><a class="ajax" href="index.html">Home</a></li>
    <li><a class="ajax" href="about.html">About</a></li>
    <li><a class="ajax" href="services.html">Services</a></li>
    <li><a class="ajax" href="profiles.html">Profiles</a></li>
    <li><a class="ajax" href="contact.html">Contact</a></li>
 </ul>
</nav>
</header>

<div id="loader"></div>
<div id="load-here">

<a class="ajax" href="demos.html">Demos</a>
<br /><br />
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

</div>
</div>

</div>

</body>
</html>

使用 AJAX/Jquery 調用外部頁面並將動態內容加載到 DIV 中

問題描述

1 個解決方案

解決方案1
0 2020-06-01 09:37:24

使用 AJAX/Jquery 調用外部頁面並將動態內容加載到 DIV 中

問題描述

1 個解決方案

解決方案1 0 2020-06-01 09:37:24

解決方案1
0 2020-06-01 09:37:24