Jquery实现form表单提交后局部刷新页面的多种方法
最近做一个小项目，刚好需要用到搜索功能，实现搜索框内输入数据然后按回车或者点击“提交”，然后给后台数据库处理并返回数据给前端，在前端局部更新数据。
但是遇到了一个小问题，就是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表单提交后局部刷新页面的多种方法的更多相关文章
- 通过jquery实现form表单提交后不跳转页面，保留当前页面
jquery代码: <script type="text/javascript" src="../js/jquery-1.8.3.min.js">& ...
- jquery模拟form表单提交并新打开页面
/** * form表单提交本页面打开 * @param url * @param params */ function postCurrent(url,params){ var form = $(& ...
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
- phpcms v9自定义表单提交后返回上一页实现方法
PHPcms v9中提交自定义表单后默认都是回到首页的,是不是感觉很不爽! 接下来,就说下phpcms v9自定义表单提交后返回上一页实现方法. 1.找到这个文件 phpcms\modules\for ...
- 怎么实现form表单提交后不重新刷新当前页面
怎么实现表单提交后不重新刷新当前页面 如何实现表单提交后不重新刷新当前页面 <form name='form1' id='form1' action='/xbcw/cw/xx_xx.ac ...
- jQuery判断 form表单提交时一些文本框的判断
一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...
- jQuery补充之jQuery扩展/form表单提交/滚动菜单
jQuery扩展 为了避免重复造轮子,能高效使用别人的代码,所以有了扩展. jQuery扩展有两种方式: 自执行函数方式 定义函数,并执行函数. 自执行函数: (function(jq){ jq.ex ...
- js form表单提交后如何可以不刷新页面 的解决办法
表单可实现无刷新页面提交,无需页面跳转,如下: 通过一个隐藏的iframe实现, form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 &l ...
- DedeCMS实现自定义表单提交后发送指定QQ邮箱的方法
如月cruyue在做DedeCMS自定义表单发送邮箱的教程,发现大部分都是在php文件里写死固定字段内容,这样虽然也能实现自定义表单提交后发送指定邮箱,但是很不智能,如月cruyue想要一个我们自定义 ...
随机推荐
- linux系统下安装Jenkins
1.首先准备java环境,安装JDK 2.部署jenkins wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redha ...
- jzoj5843
给定 n 个正整数序列 ,每个序列长度为m. 选择至少 1 个序列,在每个被选择的序列中选择一个元素,求出所有被选择的元素的 gcd. 求所有方案的结果之和,答案对 1e9+7 取模.两种方案不同,当 ...
- 盗墓笔记—阿里旺旺ActiveX控件imageMan.dll栈溢出漏洞研究
本文作者:i春秋作家——cq5f7a075d 也许现在还研究Activex就是挖坟,但是呢,笔者是摸金校尉,挖坟,呸!盗墓是笔者的本职工作. 额,不扯了,本次研究的是阿里旺旺ActiveX控件imag ...
- Alamofire源码导读一：框架
源码架构  Alamofire 的源码包括 Core.Extensions.Features.Supporting Files.其中主要逻辑在 Core里. 包括构造请求,发起请求,处理回调等. C ...
- php 对象 调用静态方法
1.BNF范式 .u.op.opline_num = , &$ TSRMLS_CC); } function_call_parameter_list .u.op.opline_num?NULL ...
- c++类定义和类实现
预备知识: c++中我们cpp文件和.h文件的区别是,cpp文件是需要编译的文件,成为一个独立的编译单元,而h文件从来是不需要编译,只是用于预处理. 通常我们在cpp文件中,完成函数的实现,然后在h中 ...
- DataTable自身查询方法
这里说到的查询有两种. 1.DataTable.Select 2.DataTable.Rows.Find a>先建立一个DataTable供使用吧. /// <summary> ...
- Spring Security构建Rest服务-1401-权限表达式
Spring Security 的权限表达式 用法,在自定义的BrowserSecurityConfig extends WebSecurityConfigurerAdapter 配置文件里,每一个a ...
- Asp.Net Core 连接Mysql
上一篇文章里最后在VS里测试是没有问题的,但是在Windows命令行模式下会报错. 首先用dotnet restore命令的时候会出现error: 然后用dotnet run会出现警告,但是依旧会成功 ...
- Postman—脚本介绍
前言 Postman包含一个基于Node.js的强大的运行时环境,它允许我们为请求和集合添加动态行为.这使的我们可以编写测试用例,构建可包含动态参数的请求,在请求之间传递数据等等. 我们可以在流程中以 ...