Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用
插件下载：jquery.form.js
1、Form插件的详细使用方法及应用实例
http://www.malsup.com/jquery/form/
2、form实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript" language="JavaScript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.form.js"></script>
<script>
// prepare the form when the DOM is ready
/*$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#htmlExampleTarget',
// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});
*/
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
target: '#htmlExampleTarget', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback 表单提交前被调用的回调函数
success: showResponse // post-submit callback 表单提交成功后被调用的回调函数
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind to the form's submit event
$('#htmlForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
</script>
</head>
<body>
<form id="htmlForm" autocomplete="on" method="post" action="r.aspx">
<TEXTAREA id=MyEnounce name=MyEnounce rows=5 cols=55></TEXTAREA>
<div id="htmlExampleTarget"></div>
<input type="submit" value="注 册" />
</form>
</body>
</html>
提交的页面 r.aspx<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Web.SessionState" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.Web.UI" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Text" %>
<%
Response.Write(Request.Form["MyEnounce"]);
%>
分享到：
相关推荐
3. 配置选项：jQuery Form提供了一系列配置选项，如dataType（返回数据类型）、beforeSubmit（提交前回调）、afterSubmit（提交后回调）等，可根据需求进行设置。 四、应用场景 1. 数据实时保存：在网页编辑器或...
此外，`$.fn.ajaxSubmit`方法还可以接受一个完整的jQuery.ajax选项对象，这意味着你可以使用所有jQuery的Ajax选项，如`cache`、`timeout`、`contentType`等，来定制你的异步请求。 总结一下，jQuery.form插件通过...
jQuery.form.js是一款基于jQuery库的插件，它为开发者提供了方便、灵活的表单处理功能，尤其在异步（AJAX）提交表单方面表现出色。这款插件使得在网页上实现无刷新的文件上传和数据提交变得简单易行，大大提升了用户...
《jQuery Form Plugin的详解与应用》 在Web开发中，jQuery是一个极其强大的JavaScript库，它极大地简化了DOM操作，事件处理以及Ajax交互等任务。而jQuery Form Plugin是jQuery的一个扩展，专门为表单处理提供了丰富...
1. **异步表单提交**：`jquery.form.js`允许开发者通过AJAX方式提交表单，避免了页面刷新，使得用户界面保持活跃。使用`$.ajaxSubmit()`或`$("#form").submit(function() { ... })`方法，可以轻松实现异步提交。 2....
`jQuery.form`插件提供了一个方便的方法`submit()`，可以轻松地发起异步表单提交，同时支持上传文件。在提交前，我们可以通过回调函数进行一些预处理，比如检查文件大小、格式等。 服务器端，`.NET`接收AJAX请求，...
- **$.ajaxForm()**：这是`jquery.form.js`的主要方法，用于绑定表单元素，实现Ajax方式的文件上传。它可以接收一个回调函数，当上传成功或失败时执行。 - **$.ajaxSubmit()**：这个方法可以直接触发表单的Ajax提交...
### JQuery Form 插件中的 `ajaxForm()` 和 `ajaxSubmit()` 方法详解 #### 一、引言 在 Web 开发中，使用 AJAX 进行异步表单提交是一种常见的技术手段，它允许开发者无需重新加载整个页面即可提交数据并接收响应...
**Ajax表单提交插件jQuery Form** 在Web开发中，jQuery Form插件是一个非常实用的工具，它使得使用Ajax技术提交HTML表单变得简单而直观。这个插件扩展了jQuery库，提供了强大的功能，允许开发者无刷新地更新页面...
在jQuery-form中，你可以轻松实现异步（Ajax）提交表单，避免页面刷新，提升用户体验。它支持多种HTTP方法，包括POST和GET，以及XMLHttpRequest Level 2的PUT、DELETE等。此外，它还兼容各种表单编码类型，如...
《jQuery Form 3.5：实现表单的Ajax异步提交》 在Web开发中，jQuery Form插件是一个非常实用的工具，它扩展了jQuery的功能，使得表单数据的Ajax异步提交变得简单易行。这里我们将深入探讨jQuery Form 3.5版本，了解...
AjaxForm插件基于jQuery库，它监听表单的submit事件，当用户点击提交按钮时，不刷新整个页面，而是通过AJAX方式将表单数据发送到服务器。这样，用户可以继续在当前页面操作，而无需等待页面重载，提高了交互的流畅性...
对于需要通过Ajax提交的表单，表单的提交按钮（通常是input type="submit"）会被使用，但实际的提交行为将被jquery.form.js拦截并改写为Ajax提交。 3. 编写JavaScript代码处理Ajax提交：在文档加载完毕后（例如在$...
在给定的压缩包文件中，我们看到主要包含两个与jQuery Form相关的文件——"jquery.form.js"和"jquery.form.min.js"，以及jQuery的核心库文件"jquery.js"和压缩版的"jquery.min.js"。 首先，让我们来深入理解jQuery ...
jQuery Form Plugin的核心特性在于它的异步提交功能，通过AJAX技术实现了无刷新的数据交互，使得用户在提交表单时无需等待页面刷新，提升了用户体验。该插件支持多种提交方式，如GET和POST，同时也支持...
在实现异步登录时，jQuery提供了方便的$.ajax()方法，可以轻松发送Ajax请求到服务器。 HTML作为页面的基础结构语言，用于构建登录表单。一个简单的登录表单可能包含用户名和密码输入框以及登录按钮，通常会有一个id...
### jQuery Form 插件详解 #### 一、简介 jQuery Form 插件是基于 jQuery 开发的一款强大且灵活的插件，它极大地扩展了 jQuery 对表单操作的支持能力。此插件不仅简化了表单数据的序列化过程，还允许通过 AJAX ...
《jQuery Form AJAX插件详解与应用实践》 在Web开发中，jQuery库以其简洁的API和强大的功能，深受开发者喜爱。而jQuery Form AJAX插件则是jQuery库中的一个实用工具，它使得表单提交过程变得更加简单、高效，尤其在...