最近做一個小項目，剛好需要用到搜索功能，實現搜索框內輸入數據然后按回車或者點擊“提交”，然后給后台數據庫處理並返回數據給前端，在前端局部更新數據。
比如這樣的：
但是遇到了一個小問題，就是form表單下任意輸入框輸入完按回車提交，整個頁面都會刷新，就算我用ajax從后台取出數據返回前端把頁面更新了，整個頁面還是會立馬刷新成原來的樣子。
所以問題又回到了最開始，就是form表單如何實現按回車提交數據處理但不刷新整個頁面。
問題和ajax其實並沒有太大關系。是js部分要進行一定的轉換。
測試代碼（包含jquery靜態庫，有網絡的同學都不用引入jquery庫，可以直接寫進html頁面看效果）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function (){ $("#form1").submit(function () { $("#show").text("444"); }); $("#form2").submit(function () { $("#show").text("777"); //中間可以做一些ajax數據交互，讓"777"為后台返回的值 return false; }); $("#btn").click(function () { $("#show").text("555"); }); $("#num3").keydown(function(e){ //按下鍵盤觸發函數 if(e.keyCode==13){ //如果按下的是回車 $("#show").text("666"); //處理事件 } }); }) </script> </head> <body> <form id="form1"> 表單一：<input type="text"> <input type="submit" value="在左側輸入框按回車或點擊此按鈕，可以看到文本值333一閃而過為444又回到333"> </form> <form id="form2"> 表單二：<input type="text"> <input type="submit" value="在左側輸入框按回車或點擊此按鈕，可以看到文本值333改為777不變回去"> </form> 獨立輸入框（按回車更新文本為666）：<input type="text" id="num3"> <br> <button id="btn">點擊更改文本值為555</button> <span id="show">333</span> </body> </html>
界面：
很簡單的一個測試代碼，看一下就知道這些方法了。
首先form不能有action跳轉，有action跳轉是肯定會更新或者跳轉到其他頁面的
方法一：給form表單寫一個submit函數，在最后加一句 return false; //感覺這篇文章看的人還是蠻多的，特地回來加粗一下，這個方法可以解決大部分情況了。
（我的例子里演示了加與不加的區別，如果不加return false;同時用submit函數處理，那么整個頁面還是會立馬刷新，數據改變只是一閃而過）
方法二：不用<input type="submit">的方式，改為設置一個button按鈕，讓用戶通過手動點擊按鈕來實現數據更改。
（這個方法比較不符實際應用，畢竟用戶的搜索習慣都是直接按回車。手要拿到鼠標上點擊一個按鈕費時費力。
方法三：脫離表單，設置一個獨立的輸入框<input>，給這個輸入框設置回車觸發事件。（回車的鍵盤值為13）
（這個方法也是可行的，實際項目中可以用<div>或者<li>把<input>輸入框組給包含起來，給每個<input>設置按下回車的觸發事件，同時提交按鈕也要設置相同的事件。然而輸入框多了的話比較麻煩，畢竟表單還是表單，是要用回車鍵處理的）
以上就是三種不同的解決辦法，大家根據自己實際項目中的應用來選擇。
此問題歸根結底與ajax並沒有直接關系，ajax只是前后端交互的一種手段，最后還是要通過前端來實現數據部分更新的。這個問題是前端的問題。
我覺得我也是太鑽牛角尖了，如果不用form或者直接讓用戶按一個按鈕提交搜索內容不是很輕松就能實現了嗎。我非要實現“按回車即可直接搜索”這個功能，好像太刻板了。。。
有時候，讓使用者麻煩一點還能增加在你的網站的滯留時間，不是嗎？哈哈