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监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
Vue 项目分环境打包的方法示例
Aug 03 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中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
php如何获取Http请求
2020/04/30 PHP
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
详解python 爬取12306验证码
2019/05/10 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
python 发送json数据操作实例分析
2019/10/15 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
numba提升python运行速度的实例方法
2021/01/25 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
建筑系毕业生自我鉴定
2014/01/24 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
春秋淹城导游词
2015/02/11 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
建国大业观后感600字
2015/06/01 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
解决Go gorm踩过的坑
2021/04/30 Golang
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题