jQuery / AJAX函數不起作用

Question

我已經問過一些有關Ajax的問題​​，但是我還是不明白。

我使用了我在Internet上找到的腳本並進行了一些修改，但是沒有用！

HTML：

<a data-toggle="team" id="times">TEAM</a>

原始腳本：

<script>
// THIS IS WHERE THE MAGIC HAPPENS
    $(function() {
        $('nav a').click(function(e) {
            $("#loading").show();
            href = $(this).attr("href");

            loadContent(href);

            // HISTORY.PUSHSTATE
            history.pushState('', 'New URL: '+href, href);
            e.preventDefault();


        });

        // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
        window.onpopstate = function(event) {
            $("#loading").show();
            console.log("pathname: "+location.pathname);
            loadContent(location.pathname);
        };

    });

    function loadContent(url){
        // USES JQUERY TO LOAD THE CONTENT
        $.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
                // THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
                $.each(json, function(key, value){
                    $(key).html(value);
                });
                $("#loading").hide();
            });

        // THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
        $('li').removeClass('current');
        $('a[href="'+url+'"]').parent().addClass('current');

    }

</script>

修改后的腳本：

<script>

// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
    $('#times').click(function(e) {
        $("#loading").show();
        var href = $(this).attr("data-toggle");

        loadContent(href);

        // HISTORY.PUSHSTATE
        history.pushState('', 'New URL: '+href, href);
        e.preventDefault();


    });

    // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
    window.onpopstate = function(event) {
        $("#loading").show();
        console.log("pathname: "+location.pathname);
        loadContent(location.pathname);
    };

});

function loadContent(url){
    $.ajax({
        url: 'ajaxcontdent/ajax'+url,
        type: 'GET',
        error: function(){
            // always good to have an error handler with AJAX
        },
        success: function(data){
            $('#content').html(data);
        }

        // THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
        $('li').removeClass('current');
        $('a[href="'+url+'"]').parent().addClass('current');

    };

</script>

我的腳本有什么問題？ 什么都沒發生。 我單擊我的<a>鏈接，什么也沒有。 我已經嘗試過將文件位置放在href屬性上，但是然后執行e.preventDefault(); 不起作用，我的網站就像沒有AJAX一樣運行。

在原始代碼中，作者使用了一些content.php文件。 但是我不知道JSON，所以我不知道他在那個文件中放了什么。

控制台中沒有錯誤。

我的ajaxcontent/ajaxteam.php文件內容：

<p style="color:#fafafa;">Team</p>

確實只是一行。 只是測試。

Answer 1

我認為這可能是導致語法錯誤的原因，我已經重新生成了您的函數之一，請使用以下代碼。

    function loadContent(url){
        $.ajax({
            url: 'ajaxcontdent/ajax'+url,
            type: 'GET',
            error: function(){
                // always good to have an error handler with AJAX
            },
            success: function(data){
                $('#content').html(data);
            }
        });
    };

然后，在上述功能的成功塊中使用所需的操作。

希望thin能幫助您。

坦斯克

Answer 2

如果我沒記錯的話

url: 'ajaxcontdent/ajax'+url,

這是主要的罪魁禍首。

試試這個：

url: 'ajaxcontent/ajax'+url,