Question

这是一个初学者的问题。如何使用ajax更改不同页面范围内的内容？

例如，我有两个div用于菜单，另一个用于内容。

菜单通过ajax调用，因此菜单列表在一个范围内。然后，我希望菜单通过ajax更改内容页面，但跨度不在菜单页面内。

我该如何实现这个目标？

Answer 1

实现此场景的一种简单方法是使用jQuery AJAX函数来操作HTML。

首先，您将使用$.get函数加载菜单HTML。然后，在$.get（在加载菜单HTML后运行）的回调函数中，我们给菜单一些操作，用另一个AJAX请求更新内容区域：


<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $.get('/url/that/returns/menu', function(returnedHTML){

        // load the #menu div with the 
        // HTML from the AJAX request
        $("#menu").html(returnedHTML);

        // make the menu links update the content area
        $("#menu li a").click(function(){

            // use the href of the menu link 
            // as the content URL
            $.get($(this).attr('href'), function(returnedHTML){

                // load the #content div with the 
                // HTML from the AJAX request
                $("#content").html(returnedHTML);
            });

            // prevent actual link click
            return false;
        });
    });

});
</script>

使用ajax更改不同页面范围内的内容

1 个答案: