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("密码错误");
}
%>