最近做一個小項目，剛好需要用到搜索功能，實現搜索框內輸入數據然后按回車或者點擊“提交”，然后給后台數據庫處理並返回數據給前端，在前端局部更新數據。
但是遇到了一個小問題，就是form表單下任意輸入框輸入完按回車提交，整個頁面都會刷新，就算我用ajax從后台取出數據返回前端把頁面更新了，整個頁面還是會立馬刷新成原來的樣子。
問題和ajax其實並沒有太大關系。是js部分要進行一定的轉換。
測試代碼：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
6 <script type="text/javascript">
7 $(document).ready(function () 8 { 9 $("#form1").submit(function () 10 { 11 $("#show").text("444"); 12 }); 13
14 $("#form2").submit(function () 15 { 16 $("#show").text("777"); 17 //中間可以做一些ajax數據交互，讓"777"為后台返回的值
18 return false; 19 }); 20
21 $("#btn").click(function () 22 { 23 $("#show").text("555"); 24 }); 25
26 $("#num3").keydown(function(e) 27 { 28 //按下鍵盤觸發函數
29 if(e.keyCode==13) 30 { 31 //如果按下的是回車
32 $("#show").text("666"); //處理事件
33 } 34 }); 35 }) 36 </script>
37 </head>
38 <body>
39 <form id="form1">
40 表單一：<input type="text">
41 <input type="submit" value="在左側輸入框按回車或點擊此按鈕，可以看到文本值333一閃而過為444又回到333">
42 </form>
43
44 <form id="form2">
45 表單二：<input type="text">
46 <input type="submit" value="在左側輸入框按回車或點擊此按鈕，可以看到文本值333改為777不變回去">
47 </form>
48
49 獨立輸入框（按回車更新文本為666）：<input type="text" id="num3">
50 <br>
51
52 <button id="btn">點擊更改文本值為555</button>
53 <span id="show">333</span>
55 </body>
56 </html>
界面：
首先form不能有action跳轉，有action跳轉是肯定會更新或者跳轉到其他頁面的
方法一：給form表單寫一個onsubmit函數，在最后加一句：return false; 如果不加return false，提交頁面時，整個頁面會立馬刷新，數據改變只是一閃而過；
方法二：不用<input type="submit">的方式，改為設置一個button按鈕，讓用戶通過手動點擊按鈕來實現數據更改。
此問題歸根結底與ajax並沒有直接關系，ajax只是前后端交互的一種手段，最后還是要通過前端來實現數據部分更新的。這個問題是前端的問題。