javascript - ajax刷新的問題
- WBOY原創
- 2016-10-10 11:56:091034瀏覽
就是想要類似segmentfaul的效果點擊哪個分區就顯示出相應的內容但是現在的問題是不知道href的鏈接怎麼寫我想要內容在當前頁面顯示herf不能寫#吧如果寫href="1. html" 就會出現先顯示資料再跳轉的情況這樣頁面就是空的不能顯示出來資料這種情況該怎麼辦呢？ 麻煩大家看仔細一點 我不是想阻止跳轉啊 我想知道segmentfault這種效果 是怎麼實現的 如果用的ajax完全沒必要去跳轉刷新頁面 但是segmentfault是有跳轉刷新的 這個是怎麼弄的呢？
<code>代码只是大概描述一下
1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
document.getElementById('java').onclick=function(){
div.innerHTML=str;
}
</script>
</head>
<body>
<a href="#" id="java">java</a>
<a href="#" id="php">php</a>
<div></div>
</body>
</html></code>
回覆內容：
就是想要類似segmentfaul的效果點擊哪個分區就顯示出相應的內容但是現在的問題是不知道href的鏈接怎麼寫我想要內容在當前頁面顯示herf不能寫#吧如果寫href="1. html" 就會出現先顯示資料再跳轉的情況這樣頁面就是空的不能顯示出來資料這種情況該怎麼辦呢？ 麻煩大家看仔細一點 我不是想阻止跳轉啊 我想知道segmentfault這種效果 是怎麼實現的 如果用的ajax完全沒必要去跳轉刷新頁面 但是segmentfault是有跳轉刷新的 這個是怎麼弄的呢？
<code>代码只是大概描述一下
1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
document.getElementById('java').onclick=function(){
div.innerHTML=str;
}
</script>
</head>
<body>
<a href="#" id="java">java</a>
<a href="#" id="php">php</a>
<div></div>
</body>
</html></code>
就寫單獨的url吧，它也不是ajax刷新，就是get。有很多小版塊其實也問題不大，後端也很輕鬆。因為資料格式基本上差不多，匹配路由時寫個正規去匹配請求的url就行了，然後處理資料在一個controller裡，在根據不同的url返回不同的資料即可。而且前端模板也不需要變化很大，復用性也很強。
在事件處理函數中可以透過呼叫preventDefault或return false來阻止瀏覽器的預設行為（這裡的預設行為就是跳轉）。另外他是伺服器渲染，不是ajax。
最後，建議買本書系統的學習，這些問題真的太基礎了，即使是沒有系統的學習過，搜尋或查API的效率也比提問高很多
不管 <a></a> 的 href 是啥，你都可以在事件中阻止預設行為
下面是 jQuery 程式碼，原生程式碼也差不多，呼叫 event 的 preventDefault()，或是回傳 false。
<code class="javascript">$("#java").on("click", e => {
e.preventDefault();
});</code>
不過也可以直接設定 href 讓它啥也不乾
<code class="html"><a href="javascript: void(0)" ...>...</a></code>
點擊到某個頁面的時候，這個頁面對應的js程式碼發送一個HTTP GET請求到後台，然後後台返回對應的（例如java/php等）資料足以。