1.准备工作
jQuery核心库文件：jquery-1.8.2.js
jquery form 库文件：jquery.form.js
2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery-form Demo</title> <!-- 需要导入的就jQuery类库 --> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script type="text/javascript" src="js/jquery.form.js"></script> <!-- JS文件 --> <script type="text/javascript" src="index.js"></script> </head> <body> <form action="" id="myForm" method="post"> <table border="1" width="70%"> <tr> <td>姓名：</td> <td> <input type="text" name="name" id="name" /> </td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender" value="m" checked="checked" />男 <input type="radio" name="gender" value="f" />女 </td> </tr> <tr> <td colspan="2"> <input type="submit" id="submit" value="提交" /> <input type="button" id="test" value="重置" /> <!-- id=reset不可以 --> <input type="button" id="clear" value="清除" /> </td> </tr> </table> </form> <div id=result></div> </body> </html>
3.JS文件
$(document).ready(function() {
// 参数设置
var options = {
target : "#result",
url : "index.jsp",
type : "post",
// dataType:"json",
resetForm : true,
beforeSubmit : validate,
success : process
// clearForm:true,
// timeout:3000
};
// 提交
$("#myForm").ajaxForm(options);
// 提交前（可以用来验证表单）
function validate(formData, jqForm, options) {
// 取得得表单元素
var name = formData[0].value;
// var name=jqForm[0].name.value;
if (name == "") {
alert("请输入姓名");
$("#name").focus();
return false;
}
// 取得参数
var param = $("#myForm").formSerialize();
// var param = $.param(formData);
alert(param);
return true;
}
// 提交后（取得返回信息，比如:操作成功）
function process(data, status) {
alert("返回的数据：" + data);
alert("状态：" + status); // success
}
// 重置
$("#test").click(function() {
$("#myForm").resetForm();
});
// 清除
$("#clear").click(function() {
$("#myForm").clearForm();
});
});
4.JSP文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String name = request.getParameter("name");
String gender = request.getParameter("gender");
String str = "name="+name+",gender="+gender;
System.out.println(str);
out.println("操作成功");
%>
相关推荐
本篇文章将深入探讨“jQuery插件：form表单验证”这一主题，包括其工作原理、如何调用以及实际应用。 表单验证是Web应用程序中的一个关键部分，确保用户输入的数据符合预设的规则，防止错误数据的提交。jQuery插件...
**jQuery validate 和 form 插件详解** 在网页开发中，用户界面的交互性和数据验证是不可或缺的部分。jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理和动画效果。`jQuery validate` 和 `...
jQuery.form插件正是为了满足这种需求而设计的，它扩展了jQuery库，使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件，实现完美的表单异步提交。 首先，我们需要了解jQuery.form...
- 引入jQuery库和jQuery Form插件：首先确保引入jQuery库，然后引入`jquery.form.js`。 - 初始化插件：通过`$('form').ajaxForm(options)`或`$('form').form(options)`来启用插件，并设置相应的配置选项。 - 配置...
《jQuery Form插件详解及其应用》 jQuery Form插件，基于jQuery库，是用于处理HTML表单的增强工具，能够方便地实现异步提交、文件上传等功能，极大地简化了前端开发人员的工作。在这个主题中，我们将深入探讨jQuery...
jQuery Form Plugin能够让你简洁的将...插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的可选参数，能够让你对表单里数据的提交做到完全的控制。
**Ajax表单提交插件jQuery Form** 在Web开发中，jQuery Form插件是一个非常实用的工具，它使得使用Ajax技术提交HTML表单变得简单而直观。这个插件扩展了jQuery库，提供了强大的功能，允许开发者无刷新地更新页面...
AjaxForm插件基于jQuery库，它监听表单的submit事件，当用户点击提交按钮时，不刷新整个页面，而是通过AJAX方式将表单数据发送到服务器。这样，用户可以继续在当前页面操作，而无需等待页面重载，提高了交互的流畅性...
在这个压缩包中，我们重点探讨的是几个基于 jQuery 的核心插件，它们分别是：jQuery UI、jQuery Form、jQuery Validate 和 jQuery vsdoc。 1. **jQuery UI** jQuery UI 是一个扩展了 jQuery 功能的开源库，提供了...
`A Jquery Inline Form Validation` 是一个高质量的jQuery插件，专注于提供直观且高效的前端表单验证功能。这个插件通过在用户输入时即时显示错误信息，使得验证过程更加顺畅，减少了用户在提交表单后发现错误的情况...
jQuery-form 是一个强大的jQuery插件，专门用于处理HTML表单的提交、上传和Ajax交互，大大简化了前端开发者与服务器端进行数据交换的过程。这个插件使得动态表单的创建和管理变得更加简单，同时提供了丰富的功能，如...
本文将聚焦于jQuery中的一个特定插件——表单插件`form`，来探讨如何利用它来增强网页表单的功能和用户体验。 表单插件`form`是jQuery的一个扩展，主要用于处理表单数据的提交与验证。它提供了异步提交表单的能力，...
**jQuery UI&Form 插件详解** jQuery UI和jQuery Form是两个非常重要的JavaScript库，它们极大地简化了网页的用户界面（UI）开发和表单处理。在这个“jQuery UI&Form 插件下载”中，我们可以找到这两个插件的官方...
在这个主题中，我们将详细讨论如何利用Struts2和jQuery的form插件来实现这一功能。 首先，Struts2是一个基于MVC（Model-View-Controller）设计模式的Java Web框架，它简化了开发过程，提供了强大的拦截器机制和结果...
jQuery.form.js可以很好地与其他jQuery插件集成，例如Bootstrap的模态框或SweetAlert，用于在表单提交前后显示提示信息。 **5. 注意事项** - 确保服务器端正确处理AJAX请求，特别是文件上传，可能需要额外的处理...
本文将深入探讨“很好用的Jquery插件”，并介绍几个常用插件及其简单使用方法，这对于在项目中提升用户体验具有显著帮助。 首先，jQuery库的核心优势在于它的API设计，它提供了丰富的选择器、DOM操作、事件处理和...
首先，jquery.form.js是一个专门用于处理表单的jQuery插件，它提供了简化AJAX表单提交过程的功能。这个插件通过提供一套易于使用的API，帮助开发者能够轻松地处理表单数据的收集、序列化以及提交。 文档中提到的`...
2. **多媒体播放**：jQuery插件如`jQuery.media`和`jPlayer`提供了优雅的方式来处理视频和音频播放，支持多种格式，提供自定义的播放器皮肤和控制选项，使开发者能够创建互动性强的多媒体体验。 3. **DOM操作和事件...
在这个“jquery管理cookie和form的js”压缩包中，我们有两个关键的脚本文件，分别是用于管理cookie的jQuery插件和处理表单（form）操作的jQuery插件。 首先，我们来详细了解一下jQuery如何管理cookie。 **jQuery ...