jQuery Form 表单提交插件-----ajaxSubmit() 的应用

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>

六、效果如下

转载于:https://www.cnblogs.com/liuhongfeng/p/5149335.html

jQuery Form 表单提交插件-----ajaxSubmit() 的应用相关推荐

表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍立即通过AJA ...
jquery form表单提交成功，回调方法
先下载 jquery-form.js [#assign security=JspTaglibs["http://www.springframework.org/security/tags&q ...
html 表单提交跳转新的页面,jquery模拟form表单提交并新打开页面
/** * form表单提交本页面打开 * @param url * @param params */ functionpostCurrent(url,params){ varform = $(&qu ...
form表单提交数据如何拿到返回值
form表单提交数据如何拿到返回值文章目录 form表单提交数据如何拿到返回值 @[TOC](文章目录) 前言一.如何拿到返回值二.在这个过程中也会遇到一些问题总结前言使用form表单提交 ...
基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
ajax提交，form表单提交，onsubmit=return checksubmit()提交验证
Ajax提交的两种方式: 一是url参数提交数据, 二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交一.Url参数提交数据 ...
html5 ,form表单提交不跳转
form表单是经常用到的一种提交数据的方法,经常用于登录或者注册功能. 可是form表单提交会跳转至提交的链接,这对于前后端分离的项目就有点不太友好.所以说我们需要在表单提交后不跳转,并且获取到接口返 ...
Form 表单提交和 Ajax 表单提交的一些区别
自己一些心得体会: 1:form 表单提交后进行后台处理程序,没有直接返回值,只能进行后台处理,Form标签里的所有数据全部提交到后台 ajax 表单提交,是可以局部提交,具有ajax的所有属性... ...
Form 表单提交的几种方式
简单的总结一下form表单提交的几种方式: 1.最简单的方式就用form的submit提交方式,这种提交方式是不需要回调函数的这种方式最近到一个form提供action路径后台接受就可以 & ...

jQuery Form 表单提交插件-----ajaxSubmit() 的应用

jQuery Form 表单提交插件-----ajaxSubmit() 的应用相关推荐

最新文章

热门文章