jQuery-UI学习dialog_form

本文介绍如何使用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("密码错误");
	}
%>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值