Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。

测试环境：部署到Tomcat中的web项目。

一、ajaxSubmit() 介绍 

立即通过AJAX方式提交表单。最常见的用法是对用户提交表单的动作进行响应时调用它。

ajaxForm 需要零个或一个参数。唯一的一个参数可以是一个回调函数或者是一个可选参数对象。

是否可以连环调用: 是。

二、引入依赖的js

<script src="jquery-1.3.1.js" type="text/javascript"></script>

 <script src="jquery.form.js" type="text/javascript"></script>

网盘下载：https://yunpan.cn/crjzfmXqaTu9e  访问密码 e3bc

三、编写页面

 <h3> Demo 2 : form插件的使用---ajaxSubmit(). </h3>

    <form id="myForm" action="demo.jsp" method="post">

        名称： <input type="text" name="name" /> <br/>

        地址： <input type="text" name="address" /><br/>

        自我介绍： <textarea name="comment"></textarea> <br/>

        <input type="submit" id="test" value="提交" /> <br/>

        <div id="output1" style="display:none;"></div>

    </form>

四、调用ajaxSubmit() 的方法

 <script type="text/javascript">

     $(document).ready(function() {

        $('#myForm').submit(function() {

               $(this).ajaxSubmit(function() {

                       $('#output1').html("提交成功！欢迎下次再来！").show();

               });

                  return false; //阻止表单默认提交

        });

      });

     </script>

五、详细代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>jQuery form插件的使用---ajaxSubmit()</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script src="jquery-1.3.1.js" type="text/javascript"></script>

    <script src="jquery.form.js" type="text/javascript"></script>

    <script type="text/javascript">

     $(document).ready(function() {

        $('#myForm').submit(function() {

               $(this).ajaxSubmit(function() {

                       $('#output1').html("提交成功！欢迎下次再来！").show();

               });

                  return false; //阻止表单默认提交

        });

      });

     </script>

   </head>

  <body>

    <h3> Demo 2 : form插件的使用---ajaxSubmit(). </h3>

    <form id="myForm" action="demo.jsp" method="post">

        名称： <input type="text" name="name" /> <br/>

        地址： <input type="text" name="address" /><br/>

        自我介绍： <textarea name="comment"></textarea> <br/>

        <input type="submit" id="test" value="提交" /> <br/>

        <div id="output1" style="display:none;"></div>

    </form>

  </body>

</html>

六、效果如下

jQuery Form 表单提交插件-----ajaxSubmit() 的应用的更多相关文章

  1. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  2. jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  3. jQuery Form 表单提交插件-----ajaxForm() 的应用

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxForm() 介绍  ajaxForm ...

  4. Jquery form表单提交

    起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器 ...

  5. spring mvc Controller与jquery Form表单提交代码demo

    1.JSP表单 <% String basePath = request.getScheme() + "://" + request.getServerName() +&qu ...

  6. jquery插件-表单提交插件-jQuery.Form

    1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...

  7. jQuery补充之jQuery扩展/form表单提交/滚动菜单

    jQuery扩展 为了避免重复造轮子,能高效使用别人的代码,所以有了扩展. jQuery扩展有两种方式: 自执行函数方式 定义函数,并执行函数. 自执行函数: (function(jq){ jq.ex ...

  8. 关于form表单提交ajaxForm和ajaxSubmit的用法与区别

    前几天在学习form表单提交时看到这两种方法,这两种方法都是实现form的ajax提交的方法,看了很多资料还是不太明白其用法和区别,最后直接自己写demo,很快就理解,所以说实操是学习的最快捷直接的途 ...

  9. 通过jquery实现form表单提交后不跳转页面，保留当前页面

    jquery代码: <script type="text/javascript" src="../js/jquery-1.8.3.min.js">& ...

随机推荐

  1. [Architect] Abp 框架原理解析(5) UnitOfWork

    本节目录 介绍 分析Abp源码 实现UOW 介绍 UOW(全称UnitOfWork)是指工作单元. 在Abp中,工作单元对于仓储和应用服务方法默认开启.并在一次请求中,共享同一个工作单元. 同时在Ab ...

  2. [JS] jQuery选择器

    jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id=lastname 的元素 .class $(& ...

  3. struts.xml中出现Package struts2 extends undefined package struts-default解决办法

    在struts.xml中出现extends undefined package struts-default,经过查阅资料原来是因为没有联网的缘故.这样解决:在myeclipse中关联本地的dtd文件 ...

  4. C#方法的重载和方法的可变参数

    方法的重载 1.方法重载的前提:方法名称必须一样 2.构成重载的条件:参数不一样(参数数量不一样,参数类型不一样) 方法的可变参数 1.可变参数的值的数量可以是0到多个. 2.可变参数调用的时候,没有 ...

  5. NPOI根据模板生成chart图表导出Excel

    导入NPOI的全部dll. 因为NPOI的API里面还没有对于Chart图表方面的操作,所以只能根据提示做好的图表作为模板,修改数据源的方法来改变图表. 注意:NPOI要用2003版以下的excel才 ...

  6. Unity多语言本地化改进版

    简介 之前捣鼓过一个通过csv配置游戏多语言支持的小工具,但是发现使用过程中,通过notepad++去进行转码很不方便,并且直接将配置的csv不加密的放在游戏中心里感觉不是很踏实 于是乎~~ 新的方案 ...

  7. 解决PL/SQL查询结果乱码的问题

    首选查询oracle服务端的编码,然后将客户端NLS_LANG设置成和Oralce服务端一样的编码即可. 1.检查服务器编码: 执行SQL语法: select * from v$nls_paramet ...

  8. 转帖一篇sixxpack破解的文章！

    星期天闲着没事玩游戏,玩游戏不能无外挂.于是百度了半天,找到了一个,看介绍貌似不错,就下载了下来.一看,竟然是用.net写的,下意识地Reflector了一下.发现竟是一个叫actmp的程序集.如图: ...

  9. SQL Server 文件和文件组

    文件和文件组简介 在SQL Server中,数据库在硬盘上的存储方式和普通文件在Windows中的存储方式没有什么不同,仅仅是几个文件而已.SQL Server通过管理逻辑上的文件组的方式来管理文件. ...

  10. PhpWind 8.7中禁止后台管理员随意修改会员用户名功能

    有人反映PHPWind 8.7中后台可以直接修改用户名的功能太过随意,干脆禁掉. OK,研究一下他的代码,admin/usermange.php  tempalate/admin/usermange. ...