jquery實現form表單提交後區域性重新整理頁面的多種方法
比如這樣的：
但是遇到了一個小問題，就是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或者直接讓使用者按一個按鈕提交搜尋內容不是很輕鬆就能實現了嗎。我非要實現“按回車即可直接搜尋”這個功能，好像太刻板了。。。
有時候，讓使用者麻煩一點還能增加在你的網站的滯留時間，不是嗎？哈哈