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

但是遇到了一个小问题，就是form表单下任意输入框输入完按回车提交，整个页面都会刷新，就算我用ajax从后台取出数据返回前端把页面更新了，整个页面还是会立马刷新成原来的样子。

问题和ajax其实并没有太大关系。是js部分要进行一定的转换。

测试代码：

 <!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表单写一个onsubmit函数，在最后加一句：return false; 如果不加return false，提交页面时，整个页面会立马刷新，数据改变只是一闪而过；

方法二：不用<input type="submit">的方式，改为设置一个button按钮，让用户通过手动点击按钮来实现数据更改。

此问题归根结底与ajax并没有直接关系，ajax只是前后端交互的一种手段，最后还是要通过前端来实现数据部分更新的。这个问题是前端的问题。

转载链接：https://www.cnblogs.com/dhx96/p/6795057.html

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

  1. 通过jquery实现form表单提交后不跳转页面，保留当前页面

    jquery代码: <script type="text/javascript" src="../js/jquery-1.8.3.min.js">& ...

  2. jquery模拟form表单提交并新打开页面

    /** * form表单提交本页面打开 * @param url * @param params */ function postCurrent(url,params){ var form = $(& ...

  3. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  4. phpcms v9自定义表单提交后返回上一页实现方法

    PHPcms v9中提交自定义表单后默认都是回到首页的,是不是感觉很不爽! 接下来,就说下phpcms v9自定义表单提交后返回上一页实现方法. 1.找到这个文件 phpcms\modules\for ...

  5. 怎么实现form表单提交后不重新刷新当前页面

    怎么实现表单提交后不重新刷新当前页面     如何实现表单提交后不重新刷新当前页面 <form name='form1' id='form1' action='/xbcw/cw/xx_xx.ac ...

  6. jQuery判断 form表单提交时一些文本框的判断

    一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...

  7. jQuery补充之jQuery扩展/form表单提交/滚动菜单

    jQuery扩展 为了避免重复造轮子,能高效使用别人的代码,所以有了扩展. jQuery扩展有两种方式: 自执行函数方式 定义函数,并执行函数. 自执行函数: (function(jq){ jq.ex ...

  8. js form表单提交后如何可以不刷新页面 的解决办法

    表单可实现无刷新页面提交,无需页面跳转,如下: 通过一个隐藏的iframe实现, form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 &l ...

  9. DedeCMS实现自定义表单提交后发送指定QQ邮箱的方法

    如月cruyue在做DedeCMS自定义表单发送邮箱的教程,发现大部分都是在php文件里写死固定字段内容,这样虽然也能实现自定义表单提交后发送指定邮箱,但是很不智能,如月cruyue想要一个我们自定义 ...

随机推荐

  1. 七，apache配置域名

    配置域名服务器流程: (1)在httpd.conf中启用虚拟主机,Include conf/extra/httpd-vhosts.conf前面的#去掉. (2)在httpd.conf中修改项目路径为自 ...

  2. IdentityServer4登陆中心

    1. 使用Vsual Studio Code 终端执行 dotnet new webapi --name IdentityServerSample 命令创建一个webapi 的 IdentitySer ...

  3. zookeeper集群环境搭建详细图文教程

    zookeeper集群环境搭建详细图文教程 zhoubang @ 2018-01-02 [文档大纲] 友情介绍 软件环境 注意点 环境安装 1. 新建用于存储安装包以及软件安装的目录 2. 下载安装z ...

  4. 在VMware 14中安装Centos7

    在VMware 14中安装Centos7 一.安装前准备 安装VMware14.1 Centos7 64位镜像下载 在VMware中安装Centos7的步骤为: 1.创建虚拟机 创建虚拟机有两种方式: ...

  5. 神策Loagent数据收集 windows部署的坑

    部署可以修改bin文件夹下的bat文件.. java改为javaw..无窗口运行 重新启动的时候..要保证上次运行到的日志文件要还在..或者同名文件.. 保证要比之前的文件大些..所以最好是之前的文件 ...

  6. Python基础8：列表推导式（list）字典推导式(dict) 集合推导式(set)

    推导式分为列表推导式(list),字典推导式(dict),集合推导式(set)三种 1.列表推导式也叫列表解析式.功能:是提供一种方便的列表创建方法,所以,列表解析式返回的是一个列表格式:用中括号括起 ...

  7. 剑指offer四十三之左旋转字符串

    一.题目 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”abc ...

  8. jQuery中的100个技巧（译）

    1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. <sc ...

  9. spring 接收前台ajax传来的参数的几个方法

    知识补充 JSON.stringify(), 将value(Object,Array,String,Number...)序列化为JSON字符串JSON.parse(), 将JSON数据解析为js原生值 ...

  10. win10系统自带的浏览器ME如何将网页转成PDF

    不多说,直接上干货! 很多用户都已经开始玩上win10了,补充玩玩一些技巧,当作小灶. 不多废话,在windows 10网页是可以保存为pdf格式.具体如下: 欢迎大家,加入我的微信公众号:大数据躺过 ...