AJAX + CSS頁面轉換

Question

有人可以逐步解釋AJAX頁面轉換嗎？ 我看到了很多解釋，但似乎找不到逐步解釋它的解釋。 我似乎無法理解這個概念。 可能類似於以下代碼？ 甚至更簡單的方法也可以使用。

基本上，我想在單擊導航菜單鏈接時顯示一個新頁面，而不必重新加載頁面。 並可能在其中添加動畫。

另外，添加“錯誤”呼叫的意義是什么，它是強制性的嗎？

$(document).ready(function() {

    $("#pages-load-area #pages-container").load("./pages/" + initialPage);

    $("#header-navigation a").on("click", function() {

        var urlPageName = $(this).attr("href");

        $.ajax({
            type: "GET",
            url: "./pages/" + urlPageName,
            processData: false,
            crossDomain: true,
            cache: false,
            success: function(result, responseData) {
                $("#pages-load-area    #pages-container").html(result);
            },
            error: function(responseData, textStatus, errorThrown) {
                alert('AJAX failed');
            },
        });

        return false;

    });
});

Answer 1

AJAX不執行“頁面轉換”。 它對服務器執行異步調用，並運行返回函數或錯誤函數。 返回函數具有一個參數，服務器可以在該參數中向客戶端發送一些數據。 有了這些數據，您就可以做任何您想做的事。

如果服務器發送下一頁，並且您得到該結果，並且用結果替換了某些html，則可以使用此功能進行“頁面轉換”。 但是將概念分開是非常重要的，以便您了解正在發生的事情。

因此，如果您發送這樣的ajax請求：

    $.ajax({
        type: "GET",
        url: "./pages/sum",
        data: {
            a: 3,
            b: 4
        },
        success: function(result) {
            alert(result);
        },
        error: function() {
            alert('AJAX failed');
        },
    });

服務器響應為“ 7”。 然后，您的警報將顯示7。“數據”中存在的變量將從您服務器的GET范圍中可用。 我不知道您使用的是哪種服務器。 在PHP中將在$ _GET中。

將返回“ 7”的PHP頁面示例：

<?php
    return $_GET['a'] + $_GET['b'];
?>

另一個例子：

    $.ajax({
        type: "GET",
        url: "./pages/sum",
        data: {
            a: 3,
            b: 4
        },
        success: function(result) {
            $("input#result").text(result);
        },
        error: function() {
            alert('AJAX failed');
        },
    });

現在，一旦調用返回，則名為“結果”的輸入將在其中顯示“ 7”。

現在回到您的情況，您可以使用url: "./pages/" + urlPageName,但是您也可以使用：

    $.ajax({
        type: "GET",
        url: "./pages",
        data: {
            pageName: urlPageName
        },
        success: function(result, responseData) {
            $("#pages-load-area    #pages-container").html(result);
        },
        error: function(responseData, textStatus, errorThrown) {
            alert('AJAX failed');
        },
    });

根據您使用的服務器技術，這可能會使您的生活更輕松。 因此，在這種情況下，您只需將服務器返回給您的內容替換“＃pages-load-area＃pages-container”元素中的html。

還有一件事，此時您不需要：

processData: false,
crossDomain: true,
cache: false,

現在暫時不要理會它們，當您對ajax調用有了更清晰的了解時，請回到它們。

關於“返回假”，如果您從jQuery文檔中閱讀了此頁面，則可能會注意到以下相關部分：

從事件處理程序返回false會自動調用event.stopPropagation（）和event.preventDefault（）“

這意味着，如果您說了一個div內的按鈕，並為該按鈕設置了onclick事件，該事件的功能以return false結尾，並且為div設置了onclick事件，那么當您單擊該按鈕時，div的onclick事件將不會因該錯誤而被解雇。 因此，您將只有一個onclick事件。

我希望我已經澄清了。 如果尚不清楚，請隨時詢問更多。