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 分栏效果实现代码
Aug 29 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
深入学习JavaScript中的bom
May 27 Javascript
javascript操作元素的常见方法小结
Nov 13 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
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
PHP goto语句用法实例
2019/08/06 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Python3开发环境搭建详细教程
2020/06/18 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
如何撰写岗位职责
2014/02/01 职场文书
建筑安全责任书范本
2014/07/24 职场文书
招标授权委托书样本
2014/09/23 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers