什么是更改页面内容而不重新加载的最佳方式？

-1

我想更改页面内容而无需重新加载整个站点。
但我也希望更改网址，<title>标记并在换页过程中添加浏览记录。像在YouTube上什么是更改页面内容而不重新加载的最佳方式？

我与该代码尝试：

$('.header a').click(function() { 
    $('.container').load(this.href + " .container > *"); 
    return false 
});

但它并没有解决我的所有问题。

任何人都可以告诉我我应该怎么做，我应该使用什么（也许AngularJS什么的）？

来源

2016-07-30 Night

使用角度JS路由 – brk

使用spfjs，它可以做你想做 – YOU

你可以使用pjax。它说从github page。

pjax是使用Ajax和pushState的提供与真正的永久链接，网页标题，以及工作后退按钮快速浏览体验jQuery插件。

pjax的工作原理是通过ajax从服务器中获取html，并用ajax'd html替换页面上的容器内容。然后使用pushState更新浏览器的当前URL，而无需重新加载页面的布局或任何资源（JS，CSS），从而使外观的页面加载速度更快。但真的只是ajax和pushState。

考虑这个eaxmple。

<!DOCTYPE html> 
<html> 

<head> 
    <!-- styles, scripts, etc --> 
</head> 

<body> 
    <h1>My Site</h1> 
    <div class="container" id="pjax-container"> 
    Go to <a href="/page/2">next page</a>. 
    </div> 
</body> 

</html>

您的脚本。

$(document).pjax('a', '#pjax-container')

当点击发生在a将ATTR的href并发送一个Ajax请求该链接，整个pjax-container将与新内容的pjax-container更换。相同的形式分隔。

$(document).on('submit', 'form[data-pjax]', function(event) { 
    $.pjax.submit(event, '#pjax-container') 
})

来源

2016-07-30 10:21:52

AngularJS是一个将主导你的代码架构的框架。然而，它是解决路由问题的一种方法：您有几个状态，每个状态都包含一个HTML模板。如果切换到另一个状态，页面内容将会改变。如果您是一位经验丰富的JavaScript开发人员，您可能想学习并深入AngularJS的世界，但请确保您想要学习相当陡峭的学习曲线。

如果你的唯一目的是切换你的页面的内容，你也可以使用jQuery。只需在页面上选择一个元素并删除其内容即可。然后，向该元素添加另一个HTML模板。下面是一些示例代码：

$(document).ready(function() { 
    $('.pageElement').empty().html('<h2>Title</h2><p>This is some content.</p>'); 
});

您还可以使用jQuery的功能注入现有的HTML模板文件的元素：

$(document).ready(function() { 
    $('.pageElement').empty().load('/template.html'); 
});

来源

2016-07-30 09:35:58

除了@什么SSC-hrep3 - 你应该添加一个“加载”巴，而不是将这个元素“空”的。有时候，Ajax请求不会以状态200响应（即超时连接，错误500等），或者比平常花费更多时间，并且用户开始想知道发生了什么。 :) – tftd

你可以用做$ stateProvider。在routes.js设置状态

.config([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    '$httpProvider', 
    '$locationProvider', 
function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) { 
     $urlRouterProvider.otherwise('home'); 
     $stateProvider 
     .state('login', { 
      url: '/login', 
      data: { isPublic: true }, 
      templateUrl: 'templates/AdminUser/login.html', 
      controller: 'AdminUserController' 
     }); 
    }]);

和控制器当u重定向到登录，然后用这个像

$state.transitionTo('login');

这是简单的例子，你可以使用multipal状态这样的方式。并重定向到URL 而不重新加载。

来源

2016-07-30 10:20:27

什么是更改页面内容而不重新加载的最佳方式？

回答

相关问题