Question

我在带有bootstrap的标题部分创建了一个管理面板，当我点击任何导航栏选项（ul-＆gt; li-＆gt; a）整个页面混蛋并重新加载我想用hllp顺利加载它ajax即没有页面刷新。我怎么能实现我尝试过在网上提供的各种材料，但它不会有帮助。

我对ajax知之甚少。

请帮忙

Answer 1

通常我认为你已经使用过jQuery。这将是最简单的。 https://jquery.com

你需要有一个后端，它应该只返回页面的一部分（需要加载）。或者使用（不推荐）$ .load

http://api.jquery.com/load/

如果您的后端返回页面的一部分：

var $container = $('#container'); // It's a block that will be used for content displaying

// Renderring content
function renderPage(response) {
  // Wrapped content hidden by default
  var $content = $('<div style="display: none">' + response + '</div>');
  // Then clear current content
  $container.find('*').remove();
  // Then append our response and fade it to display
  $content.appendTo($container).stop(true, true).fadeIn(300); 
}

// Loading page
function loadPage(url, params) {
  $.get(url, (params||{}), renderPage);
}

// Adding handler
function go(e) {
  loadPage($(e).attr('href'));
  return false;
}

然后在你的项目中：

<ul>
  <li><a href="/some/page.html" onclick="return go(this);">Page</a></li>
</ul>

在Codeigniter / Bootstrap中加载页面内容而不刷新页面

1 个答案: