使用 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>