`
周一Monday
  • 浏览: 346005 次
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery插件之Form

阅读更多

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表单验证)

    本篇文章将深入探讨“jQuery插件:form表单验证”这一主题,包括其工作原理、如何调用以及实际应用。 表单验证是Web应用程序中的一个关键部分,确保用户输入的数据符合预设的规则,防止错误数据的提交。jQuery插件...

    Jquery validate和form插件

    **jQuery validate 和 form 插件详解** 在网页开发中,用户界面的交互性和数据验证是不可或缺的部分。jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。`jQuery validate` 和 `...

    使用jQuery.form插件,实现完美的表单异步提交

    jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件,实现完美的表单异步提交。 首先,我们需要了解jQuery.form...

    jquery form插件的各个版本

    - 引入jQuery库和jQuery Form插件:首先确保引入jQuery库,然后引入`jquery.form.js`。 - 初始化插件:通过`$('form').ajaxForm(options)`或`$('form').form(options)`来启用插件,并设置相应的配置选项。 - 配置...

    jquery form jquery.form.js

    《jQuery Form插件详解及其应用》 jQuery Form插件,基于jQuery库,是用于处理HTML表单的增强工具,能够方便地实现异步提交、文件上传等功能,极大地简化了前端开发人员的工作。在这个主题中,我们将深入探讨jQuery...

    jQuery表单插件jquery.form.js(示例源码)

    jQuery Form Plugin能够让你简洁的将...插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制。

    Ajax表单提交插件jquery form

    **Ajax表单提交插件jQuery Form** 在Web开发中,jQuery Form插件是一个非常实用的工具,它使得使用Ajax技术提交HTML表单变得简单而直观。这个插件扩展了jQuery库,提供了强大的功能,允许开发者无刷新地更新页面...

    ajaxForm插件

    AjaxForm插件基于jQuery库,它监听表单的submit事件,当用户点击提交按钮时,不刷新整个页面,而是通过AJAX方式将表单数据发送到服务器。这样,用户可以继续在当前页面操作,而无需等待页面重载,提高了交互的流畅性...

    Jquery插件,JqueryUI,JqueryForm,JqueryValidate,Jqueryvsdoc

    在这个压缩包中,我们重点探讨的是几个基于 jQuery 的核心插件,它们分别是:jQuery UI、jQuery Form、jQuery Validate 和 jQuery vsdoc。 1. **jQuery UI** jQuery UI 是一个扩展了 jQuery 功能的开源库,提供了...

    高质量的jQuery表单验证插件 A Jquery Inline Form Validation

    `A Jquery Inline Form Validation` 是一个高质量的jQuery插件,专注于提供直观且高效的前端表单验证功能。这个插件通过在用户输入时即时显示错误信息,使得验证过程更加顺畅,减少了用户在提交表单后发现错误的情况...

    jquery-form - jQuery表单生成插件

    jQuery-form 是一个强大的jQuery插件,专门用于处理HTML表单的提交、上传和Ajax交互,大大简化了前端开发者与服务器端进行数据交换的过程。这个插件使得动态表单的创建和管理变得更加简单,同时提供了丰富的功能,如...

    jQuery常用插件之表单插件form使用笔记

    本文将聚焦于jQuery中的一个特定插件——表单插件`form`,来探讨如何利用它来增强网页表单的功能和用户体验。 表单插件`form`是jQuery的一个扩展,主要用于处理表单数据的提交与验证。它提供了异步提交表单的能力,...

    jquery UI&Form 插件下载

    **jQuery UI&Form 插件详解** jQuery UI和jQuery Form是两个非常重要的JavaScript库,它们极大地简化了网页的用户界面(UI)开发和表单处理。在这个“jQuery UI&Form 插件下载”中,我们可以找到这两个插件的官方...

    struts2+jquery之form插件实现异步上传

    在这个主题中,我们将详细讨论如何利用Struts2和jQuery的form插件来实现这一功能。 首先,Struts2是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它简化了开发过程,提供了强大的拦截器机制和结果...

    jquery.form.js下载_jquery.form.js上传文件插件下载

    jQuery.form.js可以很好地与其他jQuery插件集成,例如Bootstrap的模态框或SweetAlert,用于在表单提交前后显示提示信息。 **5. 注意事项** - 确保服务器端正确处理AJAX请求,特别是文件上传,可能需要额外的处理...

    很好用的Jquery插件

    本文将深入探讨“很好用的Jquery插件”,并介绍几个常用插件及其简单使用方法,这对于在项目中提升用户体验具有显著帮助。 首先,jQuery库的核心优势在于它的API设计,它提供了丰富的选择器、DOM操作、事件处理和...

    jquery表单验证插件jquery.form.js.pdf

    首先,jquery.form.js是一个专门用于处理表单的jQuery插件,它提供了简化AJAX表单提交过程的功能。这个插件通过提供一套易于使用的API,帮助开发者能够轻松地处理表单数据的收集、序列化以及提交。 文档中提到的`...

    jquery插件

    2. **多媒体播放**:jQuery插件如`jQuery.media`和`jPlayer`提供了优雅的方式来处理视频和音频播放,支持多种格式,提供自定义的播放器皮肤和控制选项,使开发者能够创建互动性强的多媒体体验。 3. **DOM操作和事件...

    jquery管理cookie和form的js

    在这个“jquery管理cookie和form的js”压缩包中,我们有两个关键的脚本文件,分别是用于管理cookie的jQuery插件和处理表单(form)操作的jQuery插件。 首先,我们来详细了解一下jQuery如何管理cookie。 **jQuery ...

Global site tag (gtag.js) - Google Analytics