Question

嗯，我知道有一种方法可以使用Ajax call＆amp; amp;更改同一页面内的内容。加载功能（我的示例页面a）
我正在寻找的是，有没有办法打电话给外部页面＆amp;将动态内容加载到该外部页面上的选定div。我想可以使用HTTP请求方法但我真的是一个菜鸟。

好的，我有一页（附图）
enter image description here

ajax在点击特定ID的时候将内容加载到“RESULT”div中这是ajax脚本＆amp; html我到目前为止。这完全加载在“页面a”本身的Result 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”＆amp;某些按钮，点击按钮，我想加载“页面a”＆amp;将所选内容加载到结果DIV enter image description here

概念是，在页面b上，单击id，它在新选项卡中加载页面a＆amp;在“RESULT”div上加载选定的内容。两个页面都在同一台服务器上非常感谢任何帮助或提示。谢谢。

Answer 1

本教程：https://css-tricks.com/rethinking-dynamic-page-replacing-content/是使用AJAX / Jquery将动态内容加载到DIV中的最佳方法，但是代码有所更改：

主要 script.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>

呼叫外部页面＆amp;使用AJAX / Jquery将动态内容加载到DIV中

1 个答案: