Jquery實現form表單提交后局部刷新頁面的多種方法


     最近做一個小項目,剛好需要用到搜索功能,實現搜索框內輸入數據然后按回車或者點擊“提交”,然后給后台數據庫處理並返回數據給前端,在前端局部更新數據。

     但是遇到了一個小問題,就是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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM