Ajax调用未加载主页面上的页面

时间:2017-01-06 12:15:22

标签: javascript html ajax

我尝试使用ajax调用加载不同的页面。但页面没有出现在主页面上。

这是文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>News Headlines</title>
    <script src="Scripts/jquery.min.js"></script>
    <link href="Content/site.css" rel="stylesheet">
    <style>
        #newslinks li {
            display: inline-block;
            margin-right: 20px;
        }

            #newslinks li a {
                padding: 5px 10px;
                background-color: white;
                color: black !important;
                text-decoration: none;
            }

                #newslinks li a:hover {
                    background-color: rgb(110,138,195);
                    color: white !important;
                }

        #headlines #newsItem {
            margin-top: 10px;
            padding: 20px;
            border: 1px solid white;
        }
    </style>

    <script>
$(document).ready(function() {
    $('#newslinks a').click(function () {
        var url = $(this).attr('href');
        $('#healines').load(url + ' #newsItem');
        //evt.pr.preventDefault();
        return false;
    });


}); // end ready
    </script>
</head>
<body>
    <div class="wrapper">
        <header>
            JAVASCRIPT <span class="amp">&amp;</span> jQUERY: THE&nbsp;MISSING&nbsp;MANUAL
        </header>
        <div class="content">
            <div class="main">
                <h1>News Headlines</h1>
                <ul id="newslinks">
                    <li><a href="today.html">Today&#8217;s News</a></li>
                    <li><a href="yesterday.html">Yesterday&#8217;s News</a></li>
                    <li><a href="lastweek.html">Last Week&#8217;s News</a></li>
                </ul>
                <div id="headlines"></div>
            </div>
        </div>
        <footer>
            <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
        </footer>
    </div>
</body>
</html>

所以你看到三个链接。但如果你点击其中一个链接就没有任何反应。我正在使用IIS。是的,它已启用。

谢谢

1 个答案:

答案 0 :(得分:0)

$('#healines').load(url + ' #newsItem');中的标题拼写错误。