body content has to be update without header and footer change and no page refresh

问题

I have a header menu with buttons "home" and "about us". By default home page loads. In the home page, i have a link in the home page. when i click on the link on the home page or "about us" button, the body content has to be changed in the home page but page should not be refresh. "About us" related data has to be display. Header and footer page is common for all pages and only body content has to be updated without page refresh. I don't want to use any jquery or no server call here.

回答1:

What you are looking for is Router. See the official Angular 2 docs on routing and navigation to get a more detailed view on this subject.

I've set up a Plunker to give you a basic example of routing in Angular 2.

The routing happens in a new file, called app.routing.ts, see below for the important parts:

import { HomeComponent }  from './home.component';
import { AboutUsComponent }    from './aboutus.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'aboutus', component: AboutUsComponent }
];

First you import the components (like pages) where you want to navigate to and after that you set the paths for it to navigate to (like the url in the address bar). path: 'aboutus', component: AboutUsComponent will load the AboutUsComponent when navigating to foo.com/aboutus.

In the HTML, the main changes are that you don't use <a href="/aboutus">, but <a routerLink="/aboutus"</a>, so Angular knows where to navigate to (see code below).

<nav>
  <a routerLink="">Home</a>
  <a routerLink="/aboutus">About us</a>
</nav>

Play around with the code and see the documentation in order to get the hang out of it.

One side note
Please, in future questions, add a starting point in code so your question can be easily answered. See also https://stackoverflow.com/help/mcve

回答2:

You can use ajax for this:

$("#link1").click(function(){
    $.ajax({
        url: url, //get the url of the link
        type: post,
        success: function(result){
            // Arrange your data according to your html webpage 
            // If the result is already aligned as per your structure then directly put it into the div you want to replace the content
            $("#container").empty();
            $container.append(arrangedHtmlStructure);
        }
    })

})

回答3:

function show (pagenum) {
  $('.page').css('display','none');
   if (pagenum == 0 ) {
      $('.home').css('display','block');
   }
   if (pagenum == 1 ) {
      $('.about').css('display','block');
   }
}

.header,.footer {
   background: black;

}
.menu a{
      color: white;
}

.about {
   display : none
}

.footer {
 position : fixed;
  bottom:0;
  width:100%;
  color:white;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
         <div class="header">
              <ul class="menu">
                  <li>
                      <a href="#" onclick="show(0)" >Home</a>
                                          <a href="#" onclick="show(1)" >About Us</a>
                  </li>
              </ul>
         </div>
         <div class="home page" >This is Home</div>
         <div class="about page">This is About</div>
          <div class="footer">This is footer</div>
  </body>
</html>

来源：https://stackoverflow.com/questions/39652374/body-content-has-to-be-update-without-header-and-footer-change-and-no-page-refre

标签

javascript

html

html5

angular

angular2-routing