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。一个PHP页面，将返回的

例 '7'：

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

取决于你所使用的服务器技术，这可能使您的生活更轻松。因此，在这种情况下，你只需通过任何服务器返回给你替换HTML里面的“＃页负荷区域＃页容器”元素。

还有一两件事，在这一点上，你并不需要：

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

他们忘了，现在，回到它们时，你有你的主意Ajax调用更加清晰。

关于“返回false”，如果你从jQuery的文档阅读this页面，您可能会注意到此相关的部分：

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

这意味着，如果你有说，一个div里面一个按钮，您可以设置与return false结束事件的功能按钮和股利onclick事件onclick事件，当你点击该按钮的div的onclick事件不会的，因为假被解雇。所以，你将有只有一个onclick事件。

我希望我已经澄清。随意问更多，如果它目前尚不清楚。