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()的应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

对jQuary选择器的全面总结
下面小编就为大家带来一篇对jQuary选择器的全面总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
jQuery实现的Div窗口震动特效
这篇文章主要介绍了jQuery实现的Div窗口震动特效 ,需要的朋友可以参考下
2014-06-06
Jquery 在页面加载后执行的几种方式
这篇文章主要介绍了Jquery 在页面加载后执行的几种方式,需要的朋友可以参考下
2014-03-03
jquery 将disabled的元素置为enabled的三种方法
在jquery中可以通过jqueryObj.attr("disabled","disabled")将页面中某个元素置为不可编辑或触发状态，但是在jquery的API reference中并没说明怎么将页面置为disable的元素重新置为可触发或可编辑的。
2009-07-07
jquery isType() 类型判断代码
jquery isType() 类型判断代码，需要的朋友可以参考下。
2011-02-02
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
使用jQuery可以更加容易地遍历DOM的父级、子级和同级元素,这里我们就来举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历:
2016-07-07
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
单击删除按钮或者登陆按钮后，弹出对话框问你是否删除或者弹出一个登陆对话框，本文使用jquery来实现这种效果，需要的朋友可以参考下
2014-04-04
高效的jQuery代码编写技巧总结
好的代码会带来速度的提升，快速渲染和响应意味着更好的用户体验。本文主要总结了如何高效的编写jQuery代码的技巧，对提升你的jQuery和javascript代码具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
jQuery 对象中的类数组操作
我们都知道jQUery对象中有一个类数组的元素包装集，该集合类似js中的数组一样拥有length属性，因此我们称此为类数组，下面我们就来总结下这个jQuery对象中的类数组时如何进行操作的
2009-04-04
jQuery 入门级学习笔记及源码
本周公司技术讲座轮到我了，准备说说现在流行的jQuery，下面是概要提纲，关键是看custom.js，已上传源码，程序中“//##”是分段用的，大家可以根据每一段取消注释，然后找到相应的id或class名查看效果。
2010-01-01