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. 通过Foxit和坚果云实现iPad和PC的pdf同步阅读（修改，笔记）

    这是解决我之后上班地铁上看书问题的一个关键部分 一个手持电子设备,不大不小 一个方便做笔记的笔 一个方便做笔记的阅读器软件 方便快速地同步(只同步标记最好了) 在查看很多建议以及自己尝试之后,总结了这 ...

  2. Sql Server来龙去脉系列之四 数据库和文件

        在讨论数据库之前我们先要明白一个问题:什么是数据库?     数据库是若干对象的集合,这些对象用来控制和维护数据.一个经典的数据库实例仅仅包含少量的数据库,但用户一般也不会在一个实例上创建太多 ...

  3. Python基础：新式类的属性访问

    一.概述 二.准备工作 1.讨论对象 2.名词解释 三.实例绑定的属性访问 1.获取属性 一般规则 参考源码 示例验证 2.设置属性 一般规则 参考源码 示例验证 3.删除属性 一般规则 参考源码 示 ...

  4. SqlDataReader、SqlDataAdapter與SqlCommand的 区别

    1.SqlDataReader,在线应用,需要conn.open(),使用完之后要关闭. SqlConnection conn = new SqlConnection(connStr); //conn ...

  5. java内部类的使用

    内部类不是很好理解,但说白了其实也就是一个类中还包含着另外一个类 如同一个人是由大脑.肢体.器官等身体结果组成,而内部类相当于其中的某个器官之一,例如心脏:它也有自己的属性和行为(血液.跳动) 显然, ...

  6. WebApi传参总动员(二)

    上篇,从最简单的string入手.本篇演示了从请求的输入流中获取实体.api: public class ValuesController : ApiController { [HttpPost] p ...

  7. EF工作中踩过的坑.

    1.EF同一个linq里边不支持两个或两个以上不同dbcontext的使用,必须拆解开才能使用; ef也不支持自定义集合和dbcontext属性的混合使用. 2.如果要用用统一域账号连接databas ...

  8. 重新想象 Windows 8 Store Apps (59) - 锁屏

    [源码下载] 重新想象 Windows 8 Store Apps (59) - 锁屏 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 锁屏 登录锁屏,获取当前程序的锁 ...

  9. 基于FreeBSD 64位内核的kFreeBSD无法在Virtualbox下安装

    ArchBSD同上 感谢大A(豆瓣)的投稿 :)

  10. [转]基于 Quercus 的手游项目终于上线了

    原文:http://blog.andsky.com/quercus-php-ngame/ 经过半年的开发,我们第一款手游戏终于开发完毕,架构使用了 netty + Quercus 实现用 php 通过 ...