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 相关文章推荐
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
自己做矿石收音机
2021/03/02 无线电
PHPMailer邮件发送的实现代码
2013/05/04 PHP
PHP的全局错误处理详解
2016/04/25 PHP
js 字符串操作函数
2009/07/25 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
js实现小时钟效果
2020/03/25 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
应用艺术毕业生的自我评价
2013/12/04 职场文书
致跳远、跳高运动员广播稿
2014/01/09 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
入党综合考察材料
2014/06/02 职场文书
志愿者活动总结报告
2014/06/27 职场文书
课程设计感想范文
2015/08/11 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS