jQuery Form 表单提交插件-----ajaxForm() 的应用
2016-01-19 19:05
751 查看
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。
测试环境:部署到Tomcat中的web项目。
一、ajaxForm() 介绍
是否可以连环调用: 是。
二、引入依赖的js
网盘下载:https://yunpan.cn/crjzfmXqaTu9e 访问密码 e3bc
三、编写页面
四、调用ajaxForm() 方法
五、详细代码如下:
六、编写接收表单的测试代码。demo.jsp
七、效果如下:
![](http://images2015.cnblogs.com/blog/697835/201601/697835-20160121185903781-1958351169.png)
![](http://images2015.cnblogs.com/blog/697835/201601/697835-20160121190235078-432236616.png)
测试环境:部署到Tomcat中的web项目。
一、ajaxForm() 介绍
ajaxForm预处理将要使用 AJAX 方式提交的表单,将所有需要用到的事件监听器添加到其中。它不是提交这个表单。 在页面的
ready函数里使用
ajaxForm来给你页面上的表单做这些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
三、编写页面
<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>
四、调用ajaxForm() 方法
<script type="text/javascript"> $(document).ready(function() { $('#myForm').ajaxForm(function() { $('#output1').html("提交成功!欢迎下次再来!").show(); }); }); </script>
五、详细代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Form插件例子-ajaxForm()</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').ajaxForm(function() {
$('#output1').html("提交成功!欢迎下次再来!").show();
});
});
</script>
</head>
<body>
<h3> Demo 1 : form插件的使用--ajaxForm(). </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>
六、编写接收表单的测试代码。demo.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("UTF-8");//防止乱码! String name = request.getParameter("name"); String address = request.getParameter("address"); String comment = request.getParameter("comment"); System.out.println(name + " " +address + " " +comment); %>
七、效果如下:
![](http://images2015.cnblogs.com/blog/697835/201601/697835-20160121185903781-1958351169.png)
![](http://images2015.cnblogs.com/blog/697835/201601/697835-20160121190235078-432236616.png)
![](http://images2015.cnblogs.com/blog/697835/201601/697835-20160121190242625-1756516901.png)
相关文章推荐
- jquery ajax返回Internal server error 500错误怎么解决??
- Struts2+Jquery实现ajax并返回json类型数据
- 如何在jQuery的Ajax调用后管理一个重定向请求
- JqueryUI插件dialog实现遮罩层
- wordpress jquery插件分页
- 【原】jQuery与CSS自动生成验证码
- jQuery的各种插入方法
- jquery实现iframe自适应子页面高度
- [翻译]jQuery Mobile入门教程——主题的使用和定制
- 关于jQuery中的trigger和triggerHandler方法的使用
- 关于jQuery中的trigger和triggerHandler方法的使用
- 插件帮助文档 --- jquery---JCarouselLite
- js、jQuery之控制元素的可见性
- 初次体验Jquery(Ajax + Json)+Struts2
- 利用jQuery接受和处理xml数据
- jQuery验证控件jquery.validate.js使用说明
- 关于jQuery的inArray 方法介绍
- jquery treeview 插件参数说明
- jquery.extend方法
- JQuery设置获取下拉菜单某个选项的值(比较全)