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数字和字符串转换示例
Mar 26 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 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
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
详解PHP中的Traits
2015/07/29 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
php实现的生成排列算法示例
2019/07/25 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
webstorm中vue语法的支持详解
2018/05/09 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
python实现批处理文件
2020/07/28 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
世界汽车零件:World Car Parts
2019/09/04 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
报到证办理个人委托书
2014/10/06 职场文书
新课程改革心得体会
2016/01/22 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers