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 ...
随机推荐
- 【蓝牙】蓝牙，调试 hcitool与gatttool实例
Bluez协议栈在安装完以后,会提供两个命令行调试工具,hcitool与gattool,我们可以根据提供的工具来轻松的调试我们的蓝牙设备,调试BLE设备时,需要获取root权限. 蓝牙设备的开启与关闭 ...
- asp实现网页浏览总数
<% AlldayView=0 Set Rs=Server.CreateObject("Adodb.RecordSet") Sql="select * from v ...
- oracle账户密码过期，修改为无限制
查看用户的proifle是哪个,一般是default: sql>SELECT username,PROFILE FROM dba_users; 查看指定概要文件(如default)的密码有效期设 ...
- hibernate课程 初探一对多映射2-1 一对多映射简介
1 在数据库中用主外键的形式实现一对多的映射关系 2 hibernate 在一方设置集合set,表示多方
- Bootstrap学习笔记（四）
四.JS插件 概述:与jQueryUI库类似,Bootstrap提供了十几个插件函数.有两种调用方法: (1) 传统JS变成方式 $(...).插件函数.(); (2) 使用data-*扩展属性(推荐 ...
- 关于th,td,tr的一些相关标签
tr表示行,td表示列,th其实也是表示列但是在这个标签中的文字会以粗体出现 <th>为表格标题,属性summar为摘要, <caption>标签为首部说明, <thea ...
- angular2-组件样式
组件样式: :host 选择器 使用:host伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素) 这是我们能以宿主元素为目标的唯一方式.除此之外,我们将没办法指定它, 因为宿主不是组 ...
- Eclipse+ADT+Android SDK 搭建安卓开发环境（转）
要求 必备知识 windows 7 基本操作. 运行环境 windows 7(64位); eclipse-jee-luna-SR2-win32(32位);ADT-23.0.4 下载地址 环境下载 最近 ...
- MyBatisUtil类
在用MyBatis框架连接数据库时,往往要经常创建sessionFactory,重复的编写大量代码,故将其中的重复代码提出成一个工具类,这样直接调用方法即可,可简化代码编写和优化运行效率,不需要重复的 ...
- 笨办法学Python（二十七）
习题 27: 记住逻辑关系 到此为止你已经学会了读写文件,命令行处理,以及很多 Python 数学运算功能.今天,你将要开始学习逻辑了.你要学习的不是研究院里的高深逻辑理论,只是程序员每天都用到的让程 ...