如何使用Javascript / jQuery做部分页面刷新

Question

我的网站上有两个单独的可导航区域。左侧列具有自己的导航，右侧列（主要内容区域）具有自己的链接集：

我希望能够点击左侧的链接（例如“恢复”，“电子邮件”等），并且仅在该左侧边栏中加载新页面（而无需刷新整个浏览器）窗口）。

我正在使用div加载右侧的（主要内容）导航以及整个侧边栏的内容：

 <script>
  $.get("navigation.html", function(data){
    $(".nav-placeholder").replaceWith(data);
  });

  $.get("sidebar-content1.html", function(data){
    $(".sidebar").replaceWith(data);
  });

我正在为左侧边栏加载它的三个链接做基本上相同的事情：

<script>
  $.get("sidebar-navigation.html", function(data){
    $(".sidebar-nav").replaceWith(data);
  });
</script>

当我按下左侧边栏中的链接时，如何刷新该粉红色区域？

感谢您的帮助！

Answer 1

首先，您不需要使用jQuery的replaceWith方法，即返回在此示例中没有任何替换元素的元素。您可以使用$(".sidebar").html(data)

要在另一个div中加载链接，您可以在加载导航链接后立即执行类似的操作。

// this will interfere all the links would load inside sidebar-nav div
$("div.sidebar-nav a").click(function(event) {
  var urlToGet = $(this).attr("href"); // gets the url of the link
  $.get(urlToGet, function(data) { // loads the url
    $("div.main-content").html(data); // puts the loaded url content to main-content 
  });

    event.preventDefault();
});

Answer 2

如果我正确理解了您的问题，那么您可能会发现JQuery的.on()和.load()函数在这里很有用。

通过.on()方法，您可以在页面中bind event handlers to DOM elements that are not currently present，这对于将navigation.html的内容动态添加到页面中很有用。

.load() method is a helper基本上可以通过一个方法调用来实现您对$.get()和$.replaceWith()所做的工作。

有关它们如何协同工作的详细信息，请参见以下评论：

/*
Use $.on() to associate a click handler with any link nested under .sidebar-nav, 
even if the links are dynamically added to the page in the future (ie after a 
$.get())
*/
$('body').on('click', '.sidebar-nav a', function() {

  /*
  Get the href for the link being clicked
  */
  var href = $(this).attr('href');

  /*
  Issue a request for the html document
  or resource at href and load the contents
  directly into .sidebar if successful
  */
  $('.sidebar').load(href);

  /*
  Return false to prevent the link's default
  navigation behavior
  */
  return false;
})

希望有帮助！

Answer 3

您可以使用以下示例。（JQUERY）

<div id="div3" class="left">
    <button onclick="refresh()" id="refresh">
        Refresh
    </button>
</div>

<div id="div4" class="right"></div>

var content="<h1>refreshed</h1>"
$(document).ready(function(){
        $('#refresh').click(function(){
            $('#div3').html(content); //it will just overrides the previous html
        });
    });