调用外部页面&amp；用AJAXJquery将动态内容加载到DIV中。

问题描述 投票：0回答：1

好吧，我知道有一种方法可以在同一个页面中使用Ajax调用&加载函数来改变内容（我的例子a页面），我正在寻找的是，有一种方法可以调用一个外部页面&加载动态内容unto该外部页面的选定的div，我想它可以使用HTTP请求方法，但我真的是一个新手。好的，我有一个页面（附图）。enter image description here

ajax将内容加载到 "result "div中，点击特定的id，这里是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({
        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。enter image description here

概念是，在b页上，id被点击，它在一个新的标签页中加载a页& 加载选择的内容在 "result "div.这两个页面是在同一服务器上真的很感激任何援助或技巧。 谢谢你。

javascript jquery ajax url
1个回答
0
投票

这个教程。https:/css-tricks.comrethinking-dynamic-page-replacing-content(动态页面替换内容)。 是使用AJAXJquery将动态内容加载到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);
            });
        }
    });
}

和 索引.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.