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库,提供了强大的功能,允许开发者无刷新地更新页面...
jQuery.form.js可以很好地与其他jQuery插件集成,例如Bootstrap的模态框或SweetAlert,用于在表单提交前后显示提示信息。 **5. 注意事项** - 确保服务器端正确处理AJAX请求,特别是文件上传,可能需要额外的处理...
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插件”,并介绍几个常用插件及其简单使用方法,这对于在项目中提升用户体验具有显著帮助。 首先,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 ...