最近做一個小項目，剛好需要用到搜索功能，實現搜索框內輸入數據然後按回車或者點擊“提交”，然後給後臺資料庫處理並返回數據給前端，在前端局部更新數據。 但是遇到了一個小問題，就是form表單下任意輸入框輸入完按回車提交，整個頁面都會刷新，就算我用ajax從後臺取出數據返回前端把頁面更新了，整個頁面還是會 ...
最近做一個小項目，剛好需要用到搜索功能，實現搜索框內輸入數據然後按回車或者點擊“提交”，然後給後臺資料庫處理並返回數據給前端，在前端局部更新數據。
但是遇到了一個小問題，就是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只是前後端交互的一種手段，最後還是要通過前端來實現數據部分更新的。這個問題是前端的問題。
轉載鏈接：https://www.cnblogs.com/dhx96/p/6795057.html
