我简单使用了一下,jQuery Form插件有一下优点:  
1.支持提交前验证. 
2.支持提交后回调. 
3.采用AJAX方式,有很好的用户体验 
4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置.
5.支持提交多种类型数据.如:xml,json等. 
主要的函数： 
1.ajaxForm 
增加所有需要的事件监听器，为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。 
实例：

$('#myFormId').ajaxForm();

2.ajaxSubmit 
马上由AJAX来提交表单。大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。 
实例：

// 绑定表单提交事件处理器

$('#myFormId').submit(function() {

// 提交表单

$(this).ajaxSubmit();

// 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false

return false;

});

3.formSerialize 
将表单串行化（或序列化）成一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&name2=value2。这个方法返回一个字符串。 
实例：

var queryString = $('#myFormId').formSerialize();

// 现在可以使用$.get、$.post、$.ajax等来提交数据

$.post('myscript.php', queryString);

4.fieldSerialize 
将表单的字段元素串行化（或序列化）成一个查询字符串。当只有部分表单字段需要进行串行化（或序列化）时，这个就方便了。这个方法将返回以下格式的字符串：name1=value1&name2=value2。这个方法返回一个字符串。 
实例：

var queryString = $('#myFormId .specialFields').fieldSerialize();

5.fieldValue 
返回匹配插入数组中的表单元素值。从0.91版起，该方法将总是以数组的形式返回数据。如果元素值被判定可能无效，则数组为空，否则它将包含一个或多于一个的元素值。该方法返回数组。 
实例：

// 取得密码输入值

var value = $('#myFormId :password').fieldValue();

alert('The password is: ' + value[0]);

6.resetForm 
通过调用表单元素原有的DOM方法，将表单恢复到初始状态。 
实例：

$('#myFormId').resetForm();

7.clearForm 
清除表单元素。该方法将所有的文本（text）输入字段、密码（password）输入字段和文本区域（textarea）字段置空，清除任何select元素中的选定，以及将所有的单选（radio）按钮和多选（checkbox）按钮重置为非选定状态。 
实例：

$('#myFormId').clearForm();

8.clearFields 
清除字段元素。只有部分表单元素需要清除时才方便使用。 
实例：

$('#myFormId .specialFields').clearFields();

jQuery Form插件的简单示例:

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

   <title>My Jquery</title>

   <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script>

   <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.form.js"></script>

   <script type="text/javascript">

   // wait for the DOM to be loaded

        $(document).ready(function() {

         // bind 'myForm' and provide a simple callback function

            $('#myForm').ajaxForm(function() {

                alert("Thank you for your comment!");

            });

        });

        // attach handler to form's submit event

        $('#myFormId').submit(function() {

         // submit the form

         $(this).ajaxSubmit();

         // return false to prevent normal browser submit and page navigation

         return false;

        });

    </script>

</head>

<body>

   <form id="myForm" action="index.jsp" method="post">

    Name: <input type="text" name="name" />

    Comment:<textarea name="comment"></textarea>

    <input type="submit" value="Submit Comment" />

   </form>

</body>

</html>

jQuery通过jquery.form.js插件使用AJAX提交Form表单的更多相关文章

  1. 表单（form）成为 ajax 提交的表单（form）

    1.form <form id="ff" method="post"> <div> <label for="name&q ...

  2. ajax 提交所有表单内容及上传图片（文件），以及单独上传某个图片（文件）

    我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...

  3. Ajax提交from表单

    一,使用Ajax提交form表单到后台传参问题 1,首先,定义一个form: <form class="form-horizontal" role="form&qu ...

  4. ajax 提交 注册表单 到MySQL数据库

    今天按照要求,要做一个登陆.注册表单,本来样式做好就行了,本来咱就是干前端的,但让咱自己都没想到的是,不到一个小时竟然都干完了,实在闲的蛋疼,就想到链接数据库玩,遥想当年,毕竟咱也是写过后台的,哪知, ...

  5. DWZ框架中ajax提交文件表单的处理(关闭当前dialog + 刷新父级navTab)

    先重点关注两个js文件:dwz.ajax.js和dwz.core.js 流程: 1.回调iframeCallback <form xx enctype="multipart/form- ...

  6. Ajax提交整个表单

    //view页面 <script> $(function () { $("#btnAdd").click(function () { var pars = $(&quo ...

  7. ajax 提交序列化表单

    1.提交序列化表单+参数: var a = $.param({'address':address,'delivity':delivity,'payment':payment}) + '&' + ...

  8. 异步上传图片，光用jquery不行，得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

  9. Ajax提交form表单内容和文件（jQuery.form.js）

    jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...

随机推荐

  1. [Flex] ButtonBar系列——flex3 ButtonBar样式之颜色的填充

    <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="h ...

  2. 快速同步GitHub代码库

    因伟大的墙的存在,github下载速度奇慢, 简单办法,在csdn code建一个账号,然后创建工程的时候选择导入模式, 填入github的项目git URL. 然后.. 从csdn的code下载就快 ...

  3. Mac 下 Maven 的命令行安装

    JDK 的安装 系统的“系统偏好设置”中我们可以看到 Java的设置, Java 7(含) 之后的版本在这里可以看到. 点击进去后,可以看到独立的 Java 控制面板 注意,这里是 JRE 的版本, ...

  4. LeetCode 58. Length of Last Word

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  5. 【转】java内部类的作用

    http://andy136566.iteye.com/blog/1061951/ 推荐一. 定义 放在一个类的内部的类我们就叫内部类. 二. 作用 1.内部类可以很好的实现隐藏 一般的非内部类,是不 ...

  6. 关于mediacontroller的一些好的文章

    1. Vitamio中文API文档(3)—— MediaController http://www.cnblogs.com/over140/archive/2012/08/30/2663733.htm ...

  7. 直接使用editbox.clear()清空时，有时会无法清除完全，此时有清空文本框的另一种方法

    editbox = driver.find_element_by_id("id") editbox.click() content = editbox.get_attribute( ...

  8. Filter Blue Light for Better Sleep（APP 推荐）

    Filter Blue Light for Better Sleep By Carolyn Mohr11 May, 2016 Many people like to use their phones ...

  9. SQL语句基础知识

    1.关于SQL语句中exists与not exists的问题 course表如下:课程代号 课程名称 K01 奥运会主题曲 K02 喜爱的专辑 K03 VB技术大全 K04 经典歌曲 K05 个人单曲 ...

  10. Java学习一

    Java程序的运行机制和JVM     JVM(java 虚拟机) Java Virtual Machine java语言比较特殊,由Java语言编写的程序需要经过编译步骤, JDK java SE ...