您的位置：首页 > Web前端 > JQuery

Jquery实现form表单提交后局部刷新页面的多种方法

2019-10-26 20:43 1611 查看

原文链接：https://www.mk2048.com/blog/blog.php?id=h02ckk002hab&title=Jquery%E5%AE%9E%E7%8E%B0form%E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E5%90%8E%E5%B1%80%E9%83%A8%E5%88%B7%E6%96%B0%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%A4%9A%E7%A7%8D%E6%96%B9%E6%B3%95

最近做一个小项目，刚好需要用到搜索功能，实现搜索框内输入数据然后按回车或者点击“提交”，然后给后台数据库处理并返回数据给前端，在前端局部更新数据。

但是遇到了一个小问题，就是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.geek-share.com/detail/2704693531.html

更多专业前端知识，请上【猿2048】www.mk2048.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航