原文:http://www.jb51.net/article/48728.htm

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:

<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; // 阻止表单自动提交事件
});
});

jQuery使用ajaxSubmit()提交表单(在不希望页面跳转的情况下)的更多相关文章

  1. jQuery使用ajaxSubmit()提交表单示例

    ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示:   代码如下: <script src=" ...

  2. 基于jQuery商品分类选择提交表单代码

    分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yList ...

  3. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  4. php使用jquery Form ajax 提交表单,并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

  5. jquery submit()不能提交表单的解决方法

    <form id="form" method="get"> <input type="text" name="q ...

  6. jquery ajax异步提交表单数据

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  7. jQuery之ajaxForm提交表单

      1.jQuery的设计非常优雅,其源代码亦给人以美感,利用jQuery框架写出来的js既简练又能完美跨浏览器.   2.jquery form插件是基于jQuery开发的一套能够利用ajax技术提 ...

  8. JQuery禁止回车提交表单

    //禁止回车键提交表单——动态绑定 $(function(){ $("input").on('keypress',  //所有input标签回车无效,当然,可以根据需求自定义 fu ...

  9. 使用jquery.form.js提交表单上传文件

    方法: 1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.clearForm()   清除表单中所有输入值的内容. 3.restF ...

随机推荐

  1. linux日志自动分割shell

    随着服务器运行时间不断增加,各种日志文件也会不断的增长,虽然硬盘已经是白菜价了,但是如果当你看到你的一个日志文件达到数十G的时候是什么感想?下面的脚本实现了如下功能: 自动对日志文件进行分割 对分割后 ...

  2. Macbook pro 13" Installs Ubuntu 18.04

    最新版的 MacBook对Ubuntu的支持(或者反过来?)不是很好,但是除了Suspend和resume功能没找到方法使用外,其他都还好,可用. 1.mac在OSX中先安装refind引导,如果开启 ...

  3. spring boot 系列学习记录

    ——初始篇 结束了短学期的课程,初步学习了ssm框架,凭借这些学到的知识完成了短学期的任务-----点餐系统. 通过学长了解到了spring boot ,自己对spring cloud有所耳闻,但是s ...

  4. SOI简单体验

    导语 arcgis for server10.3.1中提供了一个新的功能叫做soi.本文简单的介绍soi概念,实现,在使用过程中的注意事项.阅读本文和使用soi需要以下先决条件 SOI是ArcGIS ...

  5. px、dp、sp、mm、in、pt这些单位有什么区别?

    相信每个Android新手都会遇到这个问题,希望这篇帖子能让你不再纠结. px: 即像素,1px代表屏幕上一个物理的像素点: px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小 ...

  6. 图解HTTP之HTTPS详解

    背景:随着越来越多的主流网站已经使用了HTTPS,作为服务器端开发者,就必须了解HTTPS的优势与劣势. 在HTTP协议中有可能存在信息窃听或身份伪装等问题,而使用HTTPS通信机制可以有效地防止这些 ...

  7. (0.2.5)Mysql安装——RPM方式安装

    rpm安装mysql 卸载与安装服务端   一.安装服务端与客户端 #查看RPM包中所有的文件shell> rpm -qpl mysql-community-server-version-dis ...

  8. python16_day26【crm 增、改、查】

    一.增加 二.修改 三.保存

  9. php.ini优化,,,php-fpm

    无论是apache还是nginx,php.ini都是合适的.而php-fpm.conf适合nginx+fcgi的配置. 1)打开PHP的安全模式 PHP的安全模式是个非常重要的PHP内嵌的安全机制,能 ...

  10. 微信小程序组件modal

    操作反馈modal:官方文档 Demo Code: Page({ data: { modalHidden: true, modalHidden2: true }, modalTap: function ...