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 flash激活
Oct 19 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 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语言构造器介绍
2013/07/08 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python 剪切移动文件的实现代码
2018/08/02 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
extern是什么意思
2016/03/10 面试题
学前教育学生自荐信范文
2013/12/31 职场文书
物控部经理职务说明书
2014/02/25 职场文书
爱国口号
2014/06/19 职场文书
医院标语大全
2014/06/23 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
教师外出学习心得体会
2016/01/18 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server