jQuery ajaxForm()的应用
更新时间：2016年10月14日 17:22:43 作者：souvc
Ajax在Web应用中的作用越来越大，这让采用AJAX方式提交一个表单的过程简单的不能再简单了，需要的朋友可以了解一下。
jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。本文就是介绍了ajaxForm()的应用.
一、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>
三、编写页面
<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);
%>
七、效果如下：
以上所述是小编给大家介绍的ajaxForm()的应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
jquery在IE,FF浏览器差别的问题，在FF的效果很好，但是在IE上面没有效果，当时也没有在意，通过今天的练习发现，“是不是对于一些自定义的js，IE的兼容性不是太好呢2013-04-04
两种方法基于jQuery实现IE浏览器兼容placeholder效果
这篇文章主要介绍了两种方法基于jQuery实现IE浏览器兼容placeholder效果,需要的朋友可以参考下2014-10-10
有些时候需要根据浏览器来写样式，所以要判断一下浏览器类型，百度了一下，才知道JQuery有个方法直接判断，并附上原生的js的判断方法，分享给大家，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要为大家详细介绍了jQuery实现搜索页面关键字的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
相信大部份人都会把这2个的用法搞错。仔细查看下API文档就可以知道。eq返回的是一个jquery对象，get返回的是一个html 对象数组。2011-04-04
本文主要介绍了jQuery实现拖动剪裁图片作为头像的具体实例方法，具有很好的参考价值，下面跟着小编一起来看下吧2016-12-12
jQuery Ajax在web应用开发中很常用，它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法，接下来通过本文给大家介绍jquery ajax 上传文件处理方式，需要的朋友一起看看吧2016-06-06
这篇文章主要介绍了jQuery根据表单name获取值的方法,总结分析了jQuery获取表单值的常用技巧,涉及jQuery选择器的使用技巧,非常简单实用,需要的朋友可以参考下2016-05-05
首先，我们要准备的文件有jquery.js,jquery.pagination.js,pagination.css,还有一个就是经常用的table布局的css文件。这些文件都会在后面的文件中包含。2009-10-10
前阵子接到个需求，联通网上营业厅经常需要专题页面做宣传，但是由于专题页面会有按钮，以及各个图片的链接，省分的人没有html基础，没人维护，量又比较大，需要开发出一个可自定义图片热区链接的后台，于是就有了这个2012-07-07
最新评论