jQuery Form Plugin (一) ：使用AJAX提交Form表单
在jQuery Form插件可以让你很容易的使用AJAX提交Form表单，主要方法ajaxForm和ajaxSubmit负责收集表单元素的信息,管理提交进程。这两种方法都是可配置的,让你完全控制Form提交。使用AJAX提交表单没有任何方式比JQuery Form插件更容易的了.
官网地址:www.malsup.com/jquery/form/：有文档说明和演示示例可供参考！
我简单使用了一下,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的AJAX功能来实现无刷新的数据提交。 ### 传统表单提交方式 在没有jQuery的情况下，我们通常会在HTML中创建一个表单，然后通过JavaScript或者JSP/...
在这个“Ajax使用jQuery提交表单 文件”中，我们将探讨如何利用jQuery实现Ajax提交表单，从而实现异步数据传输，提高用户体验。 首先，我们需要理解jQuery中的Ajax函数`$.ajax()`。这是一个核心函数，可以进行各种...
仅使用jQuery提交表单和后台交互，不使用基于jQuery的表单插件 方式1、取到页面控件的值后拼接放在data中，传递到后台 方式2、页面序列化后放在data中，传递到后台 注：此种方式需设置页面控件的name属性
Jquery提交表单 Form
本篇文章将深入探讨如何使用jQuery来实现Ajax提交表单。 一、jQuery与Ajax基础 jQuery通过其内置的$.ajax()函数提供了对Ajax的封装。这个函数允许开发者发送异步HTTP请求，获取服务器端的数据，并在不刷新整个页面...
**jQuery与Ajax无刷新提交表单** 在网页开发中，jQuery和Ajax技术的结合使得用户交互体验得到了极大的提升。"jQuery Ajax无刷新提交表单并执行邮件通知"这个主题涉及了两个关键点：一是利用jQuery进行表单验证，二...
2. `ajaxSubmit`: 这个方法用于立即通过Ajax提交表单，通常在响应用户提交表单事件时调用。它同样接受回调函数或Options对象，也是链式调用支持的。 例如，你可以这样响应表单提交事件： ```javascript $('#...
一、jQuery提交表单基础 1. **普通表单提交**：在HTML中，一个简单的表单提交可以通过`<form>`元素的`submit`事件触发。然而，使用jQuery可以更优雅地控制这个过程。例如，当用户点击提交按钮时，我们可以添加一个...
### 知识点二：JQuery提交表单的方式 JQuery可以很轻松地通过AJAX提交表单，而无需重新加载页面。这在很多现代Web应用程序中都非常常见，可以提高用户体验。本文示例展示了如何使用`$.ajax()`方法提交数据。在这个...
看一个用jQuery提交表单ajax查询的例子。 基本功能：用户输入一个表单，输入准考证和验证码，验证用户是否输入表单，点击查询提交，然后从服务器得到返回的数据并显示出来。 代码如下： jQuery部分： 代码如下: ...
jQuery.form插件正是为了满足这种需求而设计的，它扩展了jQuery库，使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件，实现完美的表单异步提交。 首先，我们需要了解jQuery.form...
要提交表单，可以这样使用： ```javascript $.ajax({ url: 'your-server-url', // 替换为实际服务器端接口地址 type: 'POST', // 或者 'GET'，取决于服务器端期望的HTTP方法 data: formData, // 之前使用...
表单填写完成后，提交表单通常是通过JavaScript阻止默认的表单提交行为，然后使用Ajax发送表单数据到服务器。这里涉及的jQuery知识点包括`event.preventDefault()`防止页面刷新，以及`$.ajax()`进行异步请求： ```...
jQuery的`$.ajax()`函数或`.submit()`配合`.ajaxSubmit()`方法为我们提供了异步提交表单的能力，保持页面不刷新，提高交互体验。 首先，我们来看一下`jquery.form.js`这个文件。这是jQuery Form Plugin的一个核心...
在Web开发中，异步提交表单是一种常见且高效的技术，它可以提高用户体验，因为用户无需等待整个页面刷新即可看到结果。本项目以"Jquery实现表单异步提交"为主题，通过一个名为"ajaxJquerySubmit"的示例，详细展示了...
在document的ready函数中，使用ajaxForm来为Ajax提交表单进行准备。 ajaxForm方法可以接受0个或1个参数，参数既可以是一个回调函数，也可以是一个Options对象。例如： ``` $('#myForm').ajaxForm(function() { ...
本文将深入探讨如何使用jQuery的ajax方法来提交表单，从而实现异步数据交换，提高用户体验。 首先，jQuery的$.ajax()函数是进行Ajax请求的核心，它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...
如果所有验证都通过，再提交表单到服务器；否则，显示相应的错误信息。 在实际项目中，还可以考虑使用现有的验证库，如`jQuery Validate Plugin`，它提供了丰富的验证规则和自定义选项，可以简化上述过程。同时，...