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获取事件源及触发该事件的对象
Oct 24 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
Less 安装及基本用法
May 05 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
详解package.json版本号规则
Aug 01 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
php简单截取字符串代码示例
2016/10/19 PHP
如何实现JS函数的重载
2006/09/22 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python如何写try语句
2020/07/14 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
python通过cython加密代码
2020/12/11 Python
python如何实现递归转非递归
2021/02/25 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
优秀党支部书记事迹材料
2014/05/29 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
科技活动周标语
2014/10/08 职场文书
2015年消防工作总结
2015/04/24 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL