ajax handlebars 路由(ajax2：示例代码)

Ajax是一种在不刷新整个页面的情况下，通过与服务器进行异步通信的技术。而Handlebars是一种前端模板引擎，它可以将数据和模板结合起来，生成最终的HTML代码。路由则是指根据URL的不同，展示不同的内容。

在使用Ajax和Handlebars进行路由时，首先我们需要定义路由的规则。这可以通过监听浏览器URL的变化来实现。当URL发生变化时，我们可以根据不同的URL加载不同的数据，并使用Handlebars模板将数据渲染到页面上。

下面是一个使用Ajax、Handlebars和路由的示例代码：

// 定义路由规则
var routes = {
  '/home': function() {
    loadData('home.json', 'home-template');
  },
  '/about': function() {
    loadData('about.json', 'about-template');
  },
  '/contact': function() {
    loadData('contact.json', 'contact-template');
  }
};
// 监听浏览器URL的变化
window.addEventListener('hashchange', function() {
  var url = location.hash.substr(1);
  if (routes[url]) {
    routes[url]();
  } else {
    // 处理404页面
    loadErrorPage();
  }
});
// 加载数据并渲染模板
function loadData(jsonFile, templateId) {
  $.ajax({
    url: jsonFile,
    dataType: 'json',
    success: function(data) {
      var template = Handlebars.compile($('#' + templateId).html());
      var html = template(data);
      $('#content').html(html);
    },
    error: function() {
      // 处理加载数据失败的情况
      loadErrorPage();
    }
  });
}
// 加载错误页面
function loadErrorPage() {
  $('#content').html('404 Page Not Found');
}
// 初始化页面
function init() {
  // 根据初始URL加载对应的数据和模板
  var url = location.hash.substr(1);
  if (routes[url]) {
    routes[url]();
  } else {
    // 处理404页面
    loadErrorPage();
  }
}
// 页面加载完成后初始化
$(document).ready(function() {
  init();
});

在上述代码中，我们首先定义了一个`routes`对象，它包含了不同URL对应的处理函数。然后通过监听`hashchange`事件，当URL发生变化时，根据URL调用对应的处理函数。在处理函数中，我们使用Ajax来加载对应的JSON数据，并使用Handlebars模板将数据渲染到页面上。

这样，当用户访问不同的URL时，页面会根据URL加载不同的数据，并使用Handlebars模板将数据渲染到页面中，实现了基本的路由功能。