jQuery使用ajaxSubmit()提交表单(在不希望页面跳转的情况下)
原文:http://www.jb51.net/article/48728.htm
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
那么,如何通过ajaxSubmit(obj)提交数据呢?首先我们需要一个form:
<form>
标题:<input type="text" name="title" /><br />
内容:<textarea name="content"><textarea/><br />
<button>提交</button>
</form>
上面是一个需要提交内容的form,通常情况下,我们直接通过form提交的话, 提交后当前页面跳转到form的action所指向的页面。然而,很多时候我们比不希望提交表单后页面跳转,那么,我们就可以使用ajaxSubmit(obj)来提交数据。使用方法如下所示:
$('button').on('click', function() {
$('form').on('submit', function() {
var title = $('inpur[name=title]').val(),
content = $('textarea').val();
$(this).ajaxSubmit({
type: 'post', // 提交方式 get/post
url: 'your url', // 需要提交的 url
data: {
'title': title,
'content': content
},
success: function(data) { // data 保存提交后返回的数据,一般为 json 数据
// 此处可对 data 作相关处理
alert('提交成功!');
}
$(this).resetForm(); // 提交后重置表单
});
return false; // 阻止表单自动提交事件
});
});
jQuery使用ajaxSubmit()提交表单(在不希望页面跳转的情况下)的更多相关文章
- jQuery使用ajaxSubmit()提交表单示例
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 代码如下: <script src=" ...
- 基于jQuery商品分类选择提交表单代码
分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览 源码下载 实现的代码: <div class="yList ...
- jquery实现ajax提交表单
一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...
- php使用jquery Form ajax 提交表单,并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
- jquery submit()不能提交表单的解决方法
<form id="form" method="get"> <input type="text" name="q ...
- jquery ajax异步提交表单数据
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- jQuery之ajaxForm提交表单
1.jQuery的设计非常优雅,其源代码亦给人以美感,利用jQuery框架写出来的js既简练又能完美跨浏览器. 2.jquery form插件是基于jQuery开发的一套能够利用ajax技术提 ...
- JQuery禁止回车提交表单
//禁止回车键提交表单——动态绑定 $(function(){ $("input").on('keypress', //所有input标签回车无效,当然,可以根据需求自定义 fu ...
- 使用jquery.form.js提交表单上传文件
方法: 1.formSerilize() 用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.clearForm() 清除表单中所有输入值的内容. 3.restF ...
随机推荐
- nodejs(二)
nodejs第二章节 回调函数 Node.js 异步编程的直接体现就是回调 异步编程依托于回调来实现 例子1:http服务器回调 var http = require(“http”);//引入一个ht ...
- 【转】Keepalived无法绑定VIP故障排查经历
一 故障描述 我在台湾合作方给定的两台虚拟机上部署HAProxy+Keepalived负载均衡高可用方案.在配置完Keepalived后,重新启动Keepalived,Keepalived没有绑定VI ...
- [译]关于JavaScript 作用域你想知道的一切
原文连接 在学习js的过程对闭包什么的,理解不好,偶然搜到这篇文章.豁然开朗,随翻译. Javacript 中有一系列作用域的概念.对于新的JS的开发人员无法理解这些概念,甚至一些经验丰富的开发者也未 ...
- 【使用时发生的意外】file is not sufficiently replicated yet
异常堆栈如下: -- ::, ERROR [com.ultrapower.secsight.util.HdfsUtil] - 追加写入文件失败! org.apache.hadoop.ipc.Remot ...
- Spring-BeanFactory容器
Spring的BeanFactory容器 这是Spring中最简单地容器,它主要的功能是为依赖注入(DI)提供支持.这个容器接口在org.springframework.beans.factory.B ...
- vs2010帮助文件安装完全攻略
1.VS2010帮助文件不支持重新配置,这个时候打开C:\Program Files\Microsoft Help Viewer\1.0目录,找到“HelpLibManager.exe.config” ...
- 马尔可夫随机场(Markov random fields) 概率无向图模型 马尔科夫网(Markov network)
上面两篇博客,解释了概率有向图(贝叶斯网),和用其解释条件独立.本篇将研究马尔可夫随机场(Markov random fields),也叫无向图模型,或称为马尔科夫网(Markov network) ...
- vue的项目结构
一. 准备工作 1. 初始化项目 vue init webpack itany cd itany cnpm install cnpm install less less-loa ...
- Linux系统——ACL权限控制及特殊权限
ACL权限控制 ACL(access control list),可以提供除属主.属组.其他人的rwx权限之外的细节权限设定 ACL的权限控制 (1)User 使用者 (2)Group 群组 (3)M ...
- IOS开发如何入门
说到 iOS 开发,自己学得也很浅.不过至少独立一人完成了一个应用的开发到项目上线整个过程.分享一下自己的建议和想法. 首先建议阅读 Start Developing iOS Apps Today,你 ...