Синтаксис JavaScript для функции jQuery .load ()

Question

Я только что попытался сделать простой скрипт, чтобы использовать ajax для загрузки новой части страницы.Класс удаления / добавления для изменения соответствующего цвета текста работает отлично.Тем не менее, новый HTML, похоже, не появляется.У меня есть ощущение, что это связано с моим общим синтаксисом js, но я не могу разобраться.

Javascript:

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#page_menu a").click(function() {
            $("#page_menu p").removeClass("current");
            $(this).children().addClass("current");

            var project = $(this).attr("name");
            var loadUrl = project + ".html";

            $("#project_image").load(loadUrl);

            return false;
            });
        });
    </script>

Примером тега привязки в HTML будет:

<a name=example href="#">Example</a>

HTML-файл, который я ищу для загрузки, будет называться «example.html» и код в нем:

<h1>Hello</h1>

Я уверен, что это довольно прямовперед, но я просто не вижу этого!

Ура,

Rich

Answer 1

Я бы использовал href якоря напрямую:

<a href="example.html">Example</a>
<div id="project_image"></div>

А затем AJAXify его:

$(function() {
    $('#page_menu a').click(function() {
        $('#page_menu p').removeClass('current');
        $(this).children().addClass('current');
        $('#project_image').load(this.href);
        return false;
    });
});

Answer 2

Якорь, безусловно, имеет атрибут name, так что часть будет в порядке ... но чтобы сделать вещи чище, измените ваш якорь на:

<a href="example.html">Example</a>

Для длины вы можете использовать сокращенный синтаксисза $ (документ) .ready, а также делайте изменения класса в одной цепочке.Затем просто загрузите страницу, указанную в href, и, чтобы увидеть, действительно ли запрос работает, добавьте обратный вызов, например, так:

$(function() {
    $("#page_menu a").click(function(e) {
        $("#page_menu p").removeClass("current").filter(this).addClass("current");

        $("#project_image").load(this.href, function(res) {
            // This will allow you to see the response from the server without having to dig through requests
            // If you don't have a console for some reason, just change this to alert()
            console.log(res);
        });

        e.preventDefault();
    });
});