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 ...
随机推荐
- 前端性能优化-Cookie
什么是Cookie Cookie可以理解成为浏览器内部存储数据的一个数据库,并会随请求一起被发送:Cookie以键-值对的形式存在.可以存储网站的一些数据,这部分数据不会随着浏览器关闭而被清除.如下图 ...
- 二维码项目实例为二维码添加logo
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 将BufferedImage转换为InputStream,亲测可用
private static final Logger logger = Logger.getLogger(Demo.class); /** * 将BufferedImage转换为InputStrea ...
- 什么是css sprites,如何使用?
css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片.背景图是否重复.背景图定位),显示图片,减轻服务器对图片的请求数量 优点: 1.减少网页的HTT ...
- 内表转WORD
组合HTML字符串的方法来导出WORD文件 DATA: BEGIN OF wa_html, zhtml(), END OF wa_html, gt_html LIKE TABLE OF wa_html ...
- Android无需权限显示悬浮窗
TYPE_TOAST一直都可以显示, 但是用TYPE_TOAST显示出来的在2.3上无法接收点击事件, 因此还是无法随意使用. 下面是我之前研究后台线程显示对话框的时候记得笔记, 大家可以看看我们项目 ...
- 如何让MVC和多层架构和谐并存(一)
MVC的架构和多层架构,在ORM框架上是不兼容的.MVC的数据库操作需要通过实体框架Entity Framework,多层的数据库操作需要通过DAL层.我们最近刚完成的项目,实现了MVC和多层的并存, ...
- centos6.5_64bit-禅道安装及数据库操作
linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅道. 从7.3版本开始,linux一键安装包分为32位和64位两个包,请大家根据操作系统的情况下载 ...
- ES6相关特性(解构赋值)
解构赋值:本质上是一种匹配模式,等号两边的模式相同,则左边的变量可以被赋予对应的值. 注意:null & undefined 不能解构赋值!!! 数组的解构赋值: let [a,[[b],c] ...
- 从windows CMD 命令行(CMD promp)运行Docker
英文原帖 Running Docker from Windows CMD prompt https://medium.com/@neil.avery_68603/running-docker-from ...