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 相关文章推荐
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
纯javascript制作日历控件
Jul 17 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
koa-router路由参数和前端路由的结合详解
May 19 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
深入理解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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
一套VC试题
2015/01/23 面试题
幸福家庭事迹材料
2014/02/03 职场文书
政府个人对照检查材料
2014/08/28 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs