jQuery-UI学习dialog_form

最新推荐文章于 2024-05-15 16:21:10 发布

原创最新推荐文章于 2024-05-15 16:21:10 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #jquery

jQuery UI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用jQuery库构建一个具有自定义样式和交互功能的对话框，实现登录系统的用户验证流程。通过异步提交表单数据，用户可以输入用户名和密码，点击登录按钮后，系统会检查这些信息并返回验证结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dialog_form.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery对话框</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/jquery-ui-1.9.2/themes/base/jquery.ui.all.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<script type="text/javascript">
	$(function() {
		$("#dialog").dialog({
			resizable : false, //是否允许改变对话框大小
			autoOpen : false, //自动打开对话框
			title : '登录系统', //设置窗口标题
			width : 330,
			height : 200,
			show : "explode", //显示方式
			hide : "explode", //隐藏方式
			modal : true, //模式窗口
			buttons : {
				"登录" : function() {
					var name = $("#username").val();
					var pwd = $("#userpwd").val();
					//异步提交验证
					$.post("do_form.jsp", {
						"name" : name,
						"pwd" : pwd
					}, function(msg) {
						//显示验证结果
						$("#result").html(msg);
					});
				},
				"注册" : function() {
					$(this).dialog("close");
				}
			}
		});
		$("#opener").click(function() {
			$("#dialog").dialog("open");
		});
	});
</script>
</head>
<body style="font-size: 10px">
	<div id="dialog">
		<form>
			<table>
				<tr>
					<td colspan="2">
						<div id="result" style="color: red"></div>
					</td>
				</tr>
				<tr>
					<td>用户名：</td>
					<td><input type="text" id="username" name="username"></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" id="userpwd" name="userpwd"></td>
				</tr>
			</table>
		</form>
	</div>
	<span id="opener">登录</span>
</body>
</html>

do_form.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	String name = request.getParameter("name");
	String pwd = request.getParameter("pwd");
	if (name == null || name.equals("")) {
		out.print("用户名不能为空");
		return;
	}
	if (pwd == null || pwd.equals("")) {
		out.print("密码不能为空");
		return;
	}
	if (name.equals("admin") && pwd.equals("123456")) {
		out.print("登录成功");
	} else {
		out.print("密码错误");
	}
%>