Jquery AJAX+；css页面转换

有人能解释一下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;

    });
});

AJAX不做“页面转换”。它对服务器执行异步调用，并运行返回函数或错误函数。 return函数有一个参数，服务器可以在其中向客户端发送一些数据。有了这些数据，你可以做任何你想做的事情

如果服务器发送下一个页面，并且您得到了该结果，并且您用该结果替换了一些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中，它将以$\u GET表示

返回“7”的PHP页面示例：

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

现在，一旦调用返回名为“result”的输入，将在其中显示“7”

现在回到您的案例，您可以按照

url://pages/“+urlPageName，

进行操作，但也可以使用： :

根据您使用的服务器技术，这可能会使您的生活更轻松。因此，在本例中，您只需将“#pages load area#pages container”元素中的html替换为服务器返回给您的内容

还有一件事，此时您不需要：

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

暂时忘掉它们，当您对ajax调用有了更清晰的认识时，再回头看看它们

关于“return false”，如果您阅读jQuery文档中的页面，您可能会注意到以下相关部分：

从事件处理程序返回false将自动调用 event.stopPropagation（）和event.preventDefault（）

这意味着，如果你在一个div中有一个按钮，并且你为该按钮设置了一个onclick事件，该事件的函数以

return false

结尾，并且为该div设置了一个onclick事件，当你点击该按钮时，该div的onclick事件将不会因为该false而被触发。因此，你将只有一个onclick事件

---

我希望我已经澄清了。如果还不清楚，请随意询问更多。

另外，“返回错误”的含义是什么“？您是否希望了解如何解决问题，同时更好地理解单页应用程序上ajax内容调用/更新的解决方案？或者，您是在问jQuery ajax如何在您自己的个人站点中应用类似webapp的页面功能吗？只是ajax数组中的函数，如“type”“url”“processData”。。。。直到“错误”。这些函数在做什么？这是ajax的标准格式吗？如果没有所有的参数，它将无法工作？您缺少

数据类型：“json”，

将作为

url

响应的数据类型，您也没有

数据：

您将传递到

url

的数据在这里查看我的答案，我希望它能帮助您谢谢！这很有帮助。我唯一不明白的是，在前两个示例中，您暗示如果您输入“data-a=3，b=4”并发送一个Ajax调用，那么输出将是7。你是说结果函数被定义为“a+b”或“3+4”。但我看不出你是怎么定义的，不客气。我还可以看出你是新来的，所以如果你认为我的回答有帮助，你可以投我一票。如果您认为它解决了您的问题或是给出的最佳答案，您可以接受它（我的意思是单击“向上/向下投票”按钮下方的复选标记。）欢迎来到Stackoverflow。不，我不是说结果将是7。我说的是，如果您向服务器提供a=3、b=4，服务器返回7，那么您的警报将显示7。服务器发送该7的方式未显示。我本可以做一个服务器示例，但你没有说你使用的是什么服务器端语言，所以我可以用你不懂的语言给出一个示例。

    $.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');
        },
    });

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