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("密碼錯誤");
}
%>