jQuery使用ajaxSubmit()提交表单示例


Posted in Javascript onApril 04, 2014

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:

XHTML

<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; // 阻止表单自动提交事件
    });
});
Javascript 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
jquery构造器的实现代码小结
May 16 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
Three.js快速入门教程
Sep 09 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
深入理解javascript的执行顺序
Apr 04 #Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 #Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 #Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 #Javascript
javascript中的循环语句for语句深入理解
Apr 04 #Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 #Javascript
调试代码导致IE出错的避免方法
Apr 04 #Javascript
You might like
第七节--类的静态成员
2006/11/16 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
php中final关键字用法分析
2016/12/07 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
Python实现的多线程端口扫描工具分享
2015/01/21 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python实现图书借阅系统
2019/02/20 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
Python Selenium截图功能实现代码
2020/04/26 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Python如何实现爬取B站视频
2020/05/20 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python