使用 AJAX/Jquery 调用外部页面并将动态内容加载到 DIV 中

Question

Well, I understand there is a way to change contents within the same page using Ajax call & load functions (my example page a)嗯，我知道有一种方法可以使用 Ajax 调用和加载函数更改同一页面内的内容（我的示例页面 a）
What i am looking for is, is there a way to call an external page & load dynamic content unto the selected div on that external page.我正在寻找的是，有没有办法调用外部页面并将动态内容加载到该外部页面上的选定 div。 i guess it possible using HTTP Request Methods but i am really a noob at that.我想可以使用 HTTP 请求方法，但我真的是个菜鸟。

OK, I have page a (picture attached)好的，我有一个页面（附图片）
在此处输入图片说明

the ajax loads the content into the "RESULT" div on clicking the specific id's单击特定 id 时，ajax 将内容加载到“结果”div 中
here is the ajax script & the html i have come so far.这是ajax脚本和我到目前为止的html。 this loads perfectly on the Result div on the "page a" itself.这在“页面 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);
    });

so the Query is, i have "page b" & certain buttons, on clickin the button, i want to load "page a" & load the selected content unto the result DIV.所以查询是，我有“页面 b”和某些按钮，在单击按钮时，我想加载“页面 a”并将所选内容加载到结果 DIV。
在此处输入图片说明

the concept is, on page b, the id is clicked, it LOADS page a in a new tab & loads the selected content on "RESULT" div.这个概念是，在页面 b 上，单击 id，它在新选项卡中加载页面 a 并在“结果”div 上加载所选内容。 both pages are on the same server两个页面都在同一台服务器上
Would really appreciate any assistance or tips.非常感谢任何帮助或提示。 thank you.谢谢。

Answer 1

This tutorial: https://css-tricks.com/rethinking-dynamic-page-replacing-content/ is the best way to load dynamic content into DIV with AJAX/Jquery but with some changes in the code:本教程： https : //css-tricks.com/rethinking-dynamic-page-replacing-content/是使用 AJAX/Jquery 将动态内容加载到 DIV 中的最佳方式，但对代码进行了一些更改：

main script.js主脚本.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);
            });
        }
    });
}

and the index.html code:和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