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特殊用法示例介绍
Nov 29 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 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
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
javascript 写类方式之三
2009/07/05 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
理解Javascript闭包
2013/11/01 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
新手学python应该下哪个版本
2020/06/11 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
校园文化建设方案
2014/02/03 职场文书
普通话宣传标语
2014/06/26 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
2014年保密工作总结
2014/11/22 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书