jQuery Ajax

一、.load()方法

.load()方法是最简单的jQuery Ajax方法。它可以用来加载来自服务器的HTML，当服务器响应时，返回的HTML会自动被加载到一个jQuery选择器中。

模拟练习：点击导航链接，不跳转页面来加载相应的新内容

load.html

<nav>
            <a href="load.html" class="current">Home</a>
            <a href="load1.html">Route</a>
            <a href="load2.html">Toys</a>
        </nav>
        <section id="container">
            <div id="content">
                我是页面0
            </div>
        </section>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
    <script type="text/javascript" src="js/jq-load.js" ></script>

load1.html

<div id="content">
    我是页面一
</div>

load2.html

<div id="content">
    我是页面二
</div>

jq-load.js

$("nav a").on('click',function(e){
        e.preventDefault(); //阻止跳转
        var url = $(this).attr('href'); //记录要跳转的链接

        $('nav a.current').removeClass('current'); //清空当前指示器
        $(this).addClass('current'); //添加样式

        $('#content').remove(); //清空内容容器
        $('#container').load(url + ' #content').hide().fadeIn('slow');
    });