一、前端的坑-提交表單頁面自動刷新
遇到的問題
最近一段時間需要用到ajax局部的刷新頁面，本來並不是一個複雜的功能，但是卻遇到了比較大的問題，問題的具體情況是每當局部刷新之後頁面就會自動刷新，然後就又回到了沒有刷新前的狀態，這讓人感覺很坑爹啊！
排查問題
有問題了，當然是要首先排查代碼了，看了無數次的代碼，都沒發現會導致頁面自動刷新的情況，讓人十分苦惱。
然後的話，就想着難道是jquery的html()方法刷新頁面，後來查了很久，也沒有能夠找出來。
無奈之下，回去看頁面，發現了一個細節，原來這個地方的搜索按鈕在一個表單之中，偶，萬事大吉，終於找到了。原來是所使用的bootstrap的導航欄使用了表單。
<script language="javascript" type="text/javascript">
$("#search").click(function() {
$.ajax({
type : "POST",
url : "/ajaxsearch/零食",
async : false,
data : {},
dataType : "html",
timeout : 1000,
success : function(dates) {
$("#mainContent").html(dates);
window.event.returnValue = false;
},
error : function() {
console.log("請求失敗，請重試！");
}
});
});
</script>
收穫
這次的收穫就是當你所做的東西依賴第三方的時候，一定要小心一些小的細節，小心被坑到，有時候被坑到還渾然不自知，真的是相當的傷心啊！
然後，還有就是當表單提交的時候會刷新當前的頁面，那麼，如何阻止？只需要加上window.event.returnValue = false;這樣的一句代碼就可以萬事大吉了。踩到坑真的可以讓人成長的。
原文鏈接：https://blog.csdn.net/wangmeng951011/article/details/53121330
注意： Event.returnValue是非標準的方法。
二、form表單提交時都會自動刷新頁面嗎？爲什麼？
form表單提交數據都會刷新頁面
不想刷新頁面 submit的時候return false然後用ajax異步
原因：個人理解的，因爲當時Ajax還沒誕生，同源策略（在w3c最早定義是在2005-06-13）還不存在。爲了防止頁面的安全性，提交數據後不能在當前頁面獲取到返回的數據，但是有時候又必須獲取返回的數據的話，那就需要新開頁面來展示數據。這也是和Ajax的本質區別。因此Ajax受同源策略限制，而form表單提交不受同源策略限制(因爲當時同源策略都還沒有=。=)。
三、防止表單提交時刷新頁面-幾種阻止 form 表單默認提交行爲的方式
1、給form標籤的添加表單提交事件οnsubmit="return false;"
注意：onsubmit事件的作用對象爲<form>，所以把onsubmit事件加在提交按鈕身上是沒有效果的。
form對象的onsubmit事件類似onclick,都是先處理調用的函數，再進行表單是否跳轉布爾值的判斷
onsubmit="return true"爲默認的表單提交事件
onsubmit="return false"爲阻止表單提交事件
<form οnsubmit="return change()" id="myForm" method="POST" class="form-horizontal" role="form">
</form>
<script>
function change() {
//動作：阻止表單數據提交
return false;
}
</script>
2、JavaScript給form表單中的按鈕添加單擊事件οnclick="return false;"
<form οnsubmit="" id="myForm" method="POST" class="form-horizontal" role="form">
<button class="btn btn-primary" type="submit" οnclick="return change();">提交</button>
</form>
<script>
function change() {
//動作：阻止表單數據提交 return false;
}
</script>
3、Jquery 給form標籤添加表單提交事件
<form id="myForm" method="POST" class="form-horizontal" role="form">
</form>
<script>
$('#myForm').submit(function (event) {
event.preventDefault();
return false;
// 直接在事件處理程序中返回false
});
</script>
使用ajax 不想刷新頁面 submit的時候return false
$('#modifyForm').on('submit', function () {
$.ajax({
url: '/users/password',
type: 'put',
data: formData,
success: function () { },
error:function(){ }
})
// 阻止表單默認提交的行爲
return false;
});
4、規定button的類型爲button，使用click事件觸發，邏輯後手動提交；
使用button 按鈕提交表單的時候，設置 type="button" button在瀏覽器中默認的類型爲submit或使用input代替button ，設置type="button"
<button> </button>
<input type="button"/>
5、在提交事件綁定的方法的最後 使用event.preventDefault()方法；
定義和用法
preventDefault()方法阻止元素髮生默認的行爲（例如，當點擊提交按鈕時阻止對錶單的提交）。
語法
event.preventDefault()
| 參數 | 描述 |
|---|---|
event |
必需。規定阻止哪個事件的默認動作。這個 event 參數來自事件綁定函數。 |
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法將防止上面的鏈接打開 URL。</p>
</body>
</html>