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 页面执行时间计算代码
Mar 04 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
javascript实现简单的进度条
Jul 02 Javascript
Javascript中神奇的this
Jan 20 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
中学生爱国演讲稿
2013/12/31 职场文书
九年级物理教学反思
2014/01/29 职场文书
留学顾问岗位职责
2014/04/14 职场文书
销售活动策划方案
2014/08/26 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
护士求职自荐信范文
2015/03/04 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
4种非常实用的python内置数据结构
2021/04/28 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android