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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
JS面向对象、prototype、call()、apply()
May 14 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 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
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python清除字符串里非字母字符的方法
2015/07/02 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
团干部培训方案
2014/06/03 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
简易离婚协议书范本
2014/10/24 职场文书
朋友离别感言
2015/08/04 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫