form表单submit按钮提交页面不跳转
方案一
<html>
<body> <form action="" method="post" target="nm_iframe">
<input type="text" id="id_input_text" name="nm_input_text" />
<input type="submit" id="id_submit" name="nm_submit" value="提交" />
</form> <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe> </body>
</html>
方案二
<html>
<body> <form action="/api/user/register" method="post" id="registSubmit" >
<input type="text" id="id_input_text" name="nm_input_text" />
<input type="submit" id="id_submit" name="nm_submit" value="提交" />
</form>
</body>
</html>
$('#registSubmit').on('submit', function(){
registPost()
event.preventDefault() //阻止form表单默认提交
})
function registPost () {
$.ajax({
type: "post",
url: "/api/user/register",
data: $('#registSubmit').serialize(),
}).success(function(message) {
console.log(message)
}).fail(function(err){
console.log(err)
})
/*
或者用jquery.form.min.js提交
$('#registSubmit').ajaxSubmit(function(message){
console.log(message);
})
*/
}
form表单submit按钮提交页面不跳转的更多相关文章
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- form表单submit事件
form表单submit事件同时会触发form表单中button按钮的click事件 <!DOCTYPE html> <html> <head> <meta ...
- Form表单三种提交按钮的区别？
1.<input type='button' id='btn' onclick='check()' value="提交"> 说明:只是普通的按钮(不附带提交功能),不会 ...
- form表单取消按钮自动提交
默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class=& ...
- 提交Form表单,submit之前做js判断处理
效果: 在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false. 主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定 ...
- 基于form表单submit提交不跳转
方法一:target <html> <body> <form action="" method="post" target=&qu ...
- form表单input回车提交问题
问题:文本框输入完成后点击回车页面刷新问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件. 解决方法: 1.增加一个隐藏的输入框 <input ...
- 通过button将form表单的数据提交到action层
form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性". ...
- form 表单跨域提交
<!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...
随机推荐
- CentOS 搭建Redis4 环境
下载 wget http://download.redis.io/releases/redis-4.0.10.tar.gz 安装步骤 tar xvf redis-4.0.10.tar.gz mak ...
- sqlmap 命令详解（自备速查）
sqlmap速查 /pentest/database/sqlmap/txt/ common-columns.txt 字段字典 common-outputs.txt common-tables.txt ...
- Win10 手工安装.netframework3.5
1.装载win10/win8...等镜像文件 2.cmd命令管理员身份运行 3.输入命令:C:\Windows\system32>dism.exe /online /enable-feature ...
- Axis Java调C# Webservice
这是一个痛苦的过程,如果java对java的webservice可以说很方便,很简单,Axis,CXF等一系列框架生成客户端直接传参调用即可,但是异构语言就有点麻烦了,生成的客户端不好使......无 ...
- JavaScript 对象继承 OOP (三)
对象继承 A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. JavaScript 语言的继承不通过 class (es6 中的class 不过是 ...
- u-boot分析（七）----内存初始化
u-boot分析(七) 上篇博文我们按照210的启动流程,分析到了时钟初始化,今天我们继续按照u-boot的启动流程对内存的初始化进行分析. 今天我们会用到的文档: 1. 2440芯片手 ...
- mybatis返回boolean值时数据库返回null
Servlet.service() for servlet [springDispatcherServlet] in context with path [/ms] threw exception [ ...
- JavaScript Date对象方法详细总结
Date 对象方法 方法 描述 Date() 返回当日的日期和时间. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31). getDay() 从 Date 对象返回一周中的某 ...
- April 8 2017 Week 14 Saturday
Life is the art of drawing without an eraser. 人生如画,落笔无悔. Yesterday I watched a film from Japan, Afte ...
- C4C和Outlook的集成
从C4C系统下载Outlook的Addin, 安装之后,会在Outlook里看见一个新的面板: 点击Log On登录: 如果需要的话,在Settings里设置proxy. 登录之后,即可立即在outl ...