Javascript 呼叫外部页面&；使用AJAX/Jquery将动态内容加载到DIV中_Javascript_Jquery_Ajax_Url

Javascript 呼叫外部页面&；使用AJAX/Jquery将动态内容加载到DIV中

javascript jquery ajax url

Javascript 呼叫外部页面&；使用AJAX/Jquery将动态内容加载到DIV中,javascript,jquery,ajax,url,Javascript,Jquery,Ajax,Url,我知道有一种方法可以使用Ajax调用和加载函数更改同一页面中的内容（我的示例页面a）我要寻找的是，是否有一种方法可以调用外部页面&将动态内容加载到该外部页面上选定的div。我想使用HTTP请求方法是可能的但我真的是个笨蛋。好的，我有a页（附图片） ajax在单击特定id时将内容加载到“RESULT”div中这里是ajax脚本&到目前为止我已经介绍过的html。这将完美地加载到“page a”本身的Result div上 <a href="#" id="one" />&l

我知道有一种方法可以使用Ajax调用和加载函数更改同一页面中的内容（我的示例页面a）
我要寻找的是，是否有一种方法可以调用外部页面&将动态内容加载到该外部页面上选定的div。我想使用HTTP请求方法是可能的但我真的是个笨蛋。

好的，我有a页（附图片）

ajax在单击特定id时将内容加载到“RESULT”div中
这里是ajax脚本&到目前为止我已经介绍过的html。这将完美地加载到“page 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({
缓存：false
});
var ajax_load=“”；
$（“#一”）。单击（函数（）{
var loadUrl=“content.php”；
$（“#结果”）.html（ajax#u load）.load（loadUrl）；
});
$（“#两”）。单击（函数（）{
var loadUrl=“content1.php”；
$（“#结果”）.html（ajax#u load）.load（loadUrl）；
});
$（“#三”）。单击（函数（）{
var loadUrl=“content2.php”；
$（“#结果”）.html（ajax#u load）.load（loadUrl）；
});

因此，查询是，我有“第b页”和某些按钮，单击按钮，我想加载“第a页”并将所选内容加载到结果DIV中。

其概念是，在b页上，单击id，它在新选项卡中加载a页，并在“结果”div上加载所选内容。两个页面位于同一服务器上
非常感谢任何帮助或提示。谢谢。

本教程：是使用AJAX/Jquery将动态内容加载到DIV中的最佳方法，但代码有一些更改：

mainscript.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>


如果您将整个“a页”加载到“b页”的某个选项卡中，它将加载“a页”的所有内容（html、正文、标题标记等）。这将是一片混乱。所以更好的解决方案是：创建“c页”。在“c页”中，您将有html、正文等，当您需要时，您将在此页中加载“a页”和“b页”（单击、页面加载等）。当然，不要在“a页”和“b页”上放置html、body和head标记。在这种情况下，您还需要.on（）函数。@Miljan，当我指的是选项卡时，我指的是一个新窗口。我正在研究一个概念，在这个概念中，ajax调用和加载功能也可以在外部不同的页面上实现&而不仅仅是在现有页面上。哦，我明白了。。。你指的是浏览器标签：）现在是早上5点20分，所以如果你没有得到正确的答案，我会在我醒来时帮你：）好的，我会很感激@Miljan，谢谢：）嗨@MiljanPuzović，你能给我一些提示来帮助我解决这个问题吗……任何事情都会很感激的……非常感谢：）
<!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>