jQuery如何使用Ajax加载页面？

Question

我尝试了很多代码，但还没有成功。主要是我在寻找使用jQuery AJAX加载页面的方法。这很简单，但我无法理解其中的问题。请参考下面的示例HTML代码，这就是我想要的效果。

    <div class="menu">
    <ul>
    <li><a href="#tabs-1" id="page1">page 1</a></li>
    <li><a href="#tabs-2"  id="page2">page 2</a></li>
    <li><a href="#tabs-3"  id="page3">page 3</a></li>
    <li><a href="#tabs-4"  id="page4">page 4</a></li>
    <li><a href="#tabs-5"  id="page5">page 5</a></li>
    </ul>
    </div>


 <div class="contentarea" id="response">

        </div> 

以下是我尝试过的JS代码，但很多其他代码也不能正常工作...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    // load index page when the page loads
    $("#response").load("page1.html");
    $("#page1").click(function(){
    // load home page on click
        $("#response").load("page1.html");
    });
    $("#page2").click(function(){
    // load about page on click
        $("#response").load("page2.html");
    });
    $("#page3").click(function(){
    // load contact form onclick
        $("#response").load("page3.html");
    });
});

</script>

如果你们知道针对这种类型的页面加载有什么好的解决方案，请与我分享。

谢谢。

- Accore LTD

Answer 1

我已经对您的代码进行了一些整理，并将.load()替换为.html()以在jsFiddle中进行测试。正如您在这里看到的，代码正在工作：

http://jsfiddle.net/Routh/cqJ6Q/

$(document).ready(function () {
    // load index page when the page loads
    $("#response").html("DEFAULT");
    $("#page1").click(function () {
        // load home page on click
        $("#response").html("TESTING 1");
    });
    $("#page2").click(function () {
        // load about page on click
        $("#response").html("TESTING 2");
    });
    $("#page3").click(function () {
        // load contact form onclick
        $("#response").html("TESTING 3");
    });
    $("#page4").click(function () {
        // load contact form onclick
        $("#response").html("TESTING 4");
    });
    $("#page5").click(function () {
        // load contact form onclick
        $("#response").html("TESTING 5");
    });
});

每次按下按钮，输出都会改变。我唯一能想到的原因是HTML文件没有正确引用。你有控制台输出吗？ 更新 这是jsFiddle修改后的版本，内容不仅仅是加载，还有淡入效果：

http://jsfiddle.net/Routh/cqJ6Q/1/

我改变了这个：

$("#response").html("TESTING 1");

到这个：

$("#response").hide().html("<h1>Page 1</h1><p>Page 1 has been loaded</p>").fadeIn('slow');

还有许多其他的效果和技巧组合可供使用，但这超出了本问答论坛的范围。请查看http://api.jquery.com/category/effects/以获取更多函数。

- Routhinator

---

谢谢，谢谢...它起作用了...实际上我的代码也起作用了...我以前从未在本地主机上尝试过...当我尝试时，它也起作用了...所以两个代码都可以工作...那么有什么想法如何添加加载动画和淡入淡出或滑动效果？ - Accore LTD

由于您正在向这些选项卡视图提供模板，我建议您查看UnderscoreJS、RequireJS和TextJS以预加载和处理这些选项卡的模板。我将更新我的示例，以fadeIn作为动画示例。 - Routhinator

Answer 2

尝试以下操作，同时确保 html 文件的路径准确无误 -

<div class="menu">
    <ul>
    <li><a href="#tabs-1" id="page1" title="page1">page 1</a></li>
    <li><a href="#tabs-2"  id="page2" title="page2">page 2</a></li>
    <li><a href="#tabs-3"  id="page3" title="page3">page 3</a></li>
    <li><a href="#tabs-4"  id="page4" title="page4">page 4</a></li>
    <li><a href="#tabs-5"  id="page5" title="page5">page 5</a></li>
    </ul>
    </div>
 <div class="contentarea" id="response">
 </div> 


<script>
$(document).ready(function(){
     $(".menu a").click(function(){
        var title = this.title;
        var responseDiv = $("#response");
        $(responseDiv).empty().load(title + ".html", function(response, status, xhr){
            // function to call after the load.
            if (status == "error") {
                // Error occured
            }
            else {
                // Success
            }
        });
    });
});

</script>

- Abijeet Patro

Answer 3

你可以尝试像这样。

$(document).ready(function(){

    $("#page1").click(function(){
    // load home page on click
        $("#response").html($('body').load("page1.html"));
    });

});

- sudhAnsu63

---

谢谢...它工作了..其实我的代码也可以运行..我以前从来没有在本地试过..当我尝试时它也能运行..所以两个代码都可以..那么有什么想法如何添加加载动画和淡入淡出或滑动效果 - Accore LTD

对于滑动效果或动画，您可以在beforesend中显示图像，并在ajax调用成功后关闭。 - sudhAnsu63

有任何例子吗？实际上我是新的jQuery和Ajax，所以我还不太了解。只想添加加载动画（gif文件）和淡入效果。 - Accore LTD

$('#loadingDiv') .hide() // 初始时隐藏 .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }) ;https://dev59.com/-XVD5IYBdhLWcg3wKYL- - sudhAnsu63

@AccoreLTD，有5种类型的ajax调用。http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/在这里检查：您可以在before send和complete中进行任何动画。 http://www.bennadel.com/resources/presentations/jquery/demo21/ http://spyrestudios.com/jquery-part-two-selectors-animation-and-ajax/ - sudhAnsu63

Answer 4

这样，你就可以做到了。我在 www.sambook.ir 上使用它来显示国旗图标。

$('li a').click(function(){
            var address = $(this).attr('href')+ " #id(every section you want. be careful about the space before numbersign#)";
            $("#previews").empty("#response");
            $("#previews").load(address);
    });

- user2741277