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 ...
随机推荐
- linux程序分析工具介绍(一)—-”/proc”
写在最前面:在开始本文之前,笔者认为先有必要介绍一下linux下的man,如果读者手头用linux系统,直接在终端输入man man便可以看到详细的说明,我在这里简单的总结一下,man命令是用来查看l ...
- c#-day02学习笔记
类型转化 为什么要类型转化:因为C#语言是强类型的语言,所以区分了很多的类型,类型和类型之间是不能直接赋值的,如果要赋值 就需要转换类型 类型转换分为两大类: 第一类:隐式转换 隐式转换是系统默认的转 ...
- Devexpress Xtrareport 打印报表
需要引用 Using Devexpress.Xtrareport.UI: Using Devexpress.XtraPrinting.Localiztion 实例化报表,xtrareport my=n ...
- Container&injection(容器与注入思想)
container 为了更好理解JAVA容器,查询了容器的概念以及容器的诞生原因和历史: 容器技术是怎么一个概念呢?其实,IT里的容器技术是英文单词Linux Container的直译.contain ...
- Spring课程 Spring入门篇 3-4 Spring bean装配（上）之自动装配
课程链接: 1 自动装配的方式 2 自动装配实现 1 自动装配的方式 根据反射的机制 1.1 byName根据属性名自动装配,类似于依赖注入的set注入.(如果找不到set属性中的bean,如果tes ...
- Hibernate课程 初探一对多映射3-2 单向多对一的配置
1 多方实体类中加入,一方类和getset方法 //多方定义一个一方的引用 private Grade grade; public Grade getGrade() { return grade; } ...
- 在 Excel 中设置图片
package com.smbea.demo.excel; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStr ...
- Sharepoint 2013企业内容管理学习笔记(二) 全自动化内容管理
全自动化内容管理 所谓全自动化内容管理啊,其实对于用户来说,就更简单便捷有爱了,用户只需要把文件上传到部门网站的放置库中,文件就会快速自动躺到企业记录中心的某个归档记录库了,怎么样,很方便,有没有,很 ...
- 安装BI Publisher Desktop报错：“Template Builder Installer Failed:Unexpected Error”
原因:office的版本未安装正确,应该安装X86版本的,如果是X64的会出现,重新安装X86版本的office后解决问题.
- Razor 语法糖常规用法
1.隐匿代码表达式 例: @model.name 会将表达式的值计算并写入到响应中,输入时采用html编码方式 2.显示表达式 例:@(model.name)会将输入@model.name字符串 3. ...