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 相关文章推荐
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
JS实现放大镜效果
Sep 21 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
深入理解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
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
Python计算回文数的方法
2015/03/11 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python 变量的创建过程详解
2019/09/02 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
搬家公司的创业计划书
2014/01/01 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
公证委托书大全
2014/04/04 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
建国大业观后感
2015/06/01 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
zabbix配置nginx监控的实现
2022/05/25 Servers