jquery ajax 页面加载如何？

Question

我尝试了很多代码但还没有成功。 主要是我在看 jquery ajax 加载页面。 它非常简单，但我无法弄清楚prople。 请参阅下面的示例 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>

如果你们知道该类型加载页面的任何好的解决方案。 请与我分享。

谢谢

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/ 。

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>

Answer 3

你可以这样试试。

$(document).ready(function(){

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

});

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);
    });