我需要使用ajax動態更改頁面的一部分

我剛剛完成了線框，並且需要動態地更改頁面的主要部分，這是一個div class =「container」，頁面的切片部分代表了其他內容被注入的index.html我需要使用ajax動態更改頁面的一部分

請參閱圖像：http://i.stack.imgur.com/IYiTn.jpg

紅色部分需要與其他的.html動態交換上述鏈接點擊後。藍色的靜態部分留下。

<!doctype html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9" lang=""> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="apple-touch-icon" href="apple-touch-icon.png"> 

     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <style> 
      body { 
       padding-top: 5%; 

      } 
     </style> 
     <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
     <link rel="stylesheet" href="css/main.css"> 
     <link rel="stylesheet" type="text/css" href="dist/css/slider-pro.css" media="screen"/> 
     <link rel="stylesheet" type="text/css" href="css/examples.css" media="screen"/> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'> 

     <script type="text/javascript" src="libs/jquery-1.11.0.min.js"></script> 
     <script type="text/javascript" src="dist/js/jquery.sliderPro.min.js"></script> 

     <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> 




    </head> 
    <body> 
     <!--[if lt IE 8]> 
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
     <![endif]--> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"><big>Chris Kalmar</big> <small>portfolio</small></a> 
      </div> 
     </div> 
    </nav> 
    <div class"container-fluid"> 
    <div class"row"> 
    <div class"col-xs-6"> 

     <ul> 
      <li class="branding"><a href="#brand">Branding</a></li> 
      <li class="3d"><a href="#3d">3D</a></li> 
      <li class="Apps"><a href="#app">Apps</a></li> 
     </ul> 
    </div> 
    </div> 
    </div> 

    <div class="container"> 

    <!-- ajax call--> 




    <!-- /ajax call--> 


    </div><!--/container--> 



    <footer> 
     <p>Chris Kalmar - All rights reserved 2015</p> 
    </footer> 


     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> 

     <script src="js/vendor/bootstrap.min.js"></script> 

     <script src="js/plugins.js"></script> 
     <script src="js/main.js"></script> 

     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
     <script> 
      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= 
      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; 
      e=o.createElement(i);r=o.getElementsByTagName(i)[0]; 
      e.src='//www.google-analytics.com/analytics.js'; 
      r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); 
      ga('create','UA-XXXXX-X','auto');ga('send','pageview'); 
     </script> 
<script> 
$(document).ready(function(){ 
    var router = { 
     "#brand" : "http://www.chriskalmar.com/branding.html", 
     "#3d" : "http://www.chriskalmar.com/3d.html", 
    }; 
    $(window).on("hashchange", function(){ 
     var route = router[location.hash]; 
     if (route === undefined) { 
      return; 
     } 
     else {    
      $(".container").load("" + route + " #content"); 
     }    
    }); 
}); 
</script> 

    </body> 
</html>

來源

2015-06-30 kriky

發表您的HTML了。還有，發佈js錯誤日誌（通過瀏覽器js控制檯，在鉻按f12） –

嗨Nishad，剛剛編輯未捕獲SyntaxError：意外的輸入結束 – kriky

通常情況下，我要做的就是創建一個路由處理完全映射到URL地址散列。這樣，當我偵聽窗口hashchange事件時，我可以路由到該散列的相應url。對象應該是這樣的：

var router = { 
    "#ajax" : "http://fiddle.jshell.net" 
};

然後我用這個對象來異步獲取從URL的HTML，使用路由器和jQuery的GET請求（在hashchange）：

$(window).on("hashchange", function(){ 
    var route = router[location.hash]; 
    if (typeof route === 'undefined') return;    
    $.get(route, function(data) { 
     $(".sliderContent").html(data); 
    });     
});

，你可以從jquery get的回調中看到，檢索到的ajax數據被注入sliderContent div中的DOM中。我希望這有助於:)

看到這裏工作的jsfiddle：http://jsfiddle.net/zrLLhq30/5/

編輯：AJAX需要一點時間來處理，所以給它一點時間來加載。

UPDATE

我已經更新了我的小提琴，包括多條鏈路（以及與一個jQuery load更換了jQuery get，只是加快了資源檢索），正如你所看到的， div內的內容無需刷新頁面即可加載到容器中。

如果您按照他們的方式實施瞭解決方案，對每個資源URL使用不同的哈希值，那麼它應該很好。我希望這是你的意思在這裏:)

更新的jsfiddle：http://jsfiddle.net/zrLLhq30/7/

來源

2015-06-30 10:07:35

是的，但我需要通過少量鏈接瀏覽頁面加載，但需要每次刷新看到這裏：http：//www.chriskalmar.com – kriky

我明白了！很抱歉對於這個誤會。無論何時我需要強制重載加載AJAX的頁面上的元素，我通常會在URL中添加一個基於時間的修飾符。例如，我會在我加載的URL末尾添加一個'Date.getTime（）'查詢。我在工作時並沒有完全查看你的代碼，但如果你仍在努力工作，我會在今天晚些時候解決它。 –

謝謝喬納森。它需要比我更深入的瞭解。也許是與緩存我不知道...我只需要使頁面的一部分動態和頁腳，導航欄和側欄保持靜態。 – kriky

這個錯誤Uncaught SyntaxError: Unexpected end of input由於錯過了右括號而可能發生。所以在你的jquery點擊函數中，外部右括號將會丟失。我檢查了你的代碼，是的你錯過了關閉paranthesis。

而且這個錯誤有關的答案是alreday這裏：JavaScript error (Uncaught SyntaxError: Unexpected end of input)

$(function() { $(".branding").click(function() { 
        $.ajax({ 
         url: 'branding.html', 
         data: { id: $(this).attr('id') }, 
         cache: false, 
         success: function (data) { 
          $(".container").replaceWith(data); //try with double qoutes 
         } 
        }); 
       }); 
       });//this is the missing paranthesis 


$(function() { $(".3d").click(function() { 
         $.ajax({ 
          url: '3d.html', 
          data: { id: $(this).attr('id') }, 
          cache: false, 
          success: function (data) { 
           $(".container").replaceWith(data); //try with double qoutes 
          } 
         }); 
        }); 
        });//this is the missing paranthesis

來源

2015-06-30 09:15:33

我需要使用ajax動態更改頁面的一部分

回答

相關問題