jQuery dialog实现登陆，增删改操作

最新推荐文章于 2020-08-30 22:41:20 发布

。。呵呵

最新推荐文章于 2020-08-30 22:41:20 发布

阅读量556

点赞数 1

本文链接：https://blog.csdn.net/u012610592/article/details/49230677

版权

java-web阶段做一些小的项目时，传值往往使用表单form作为载体进行传值，但是在实际的一些网络操作中很多都会使用弹出框进行取值，比如一个登陆页面，直接会弹出一个登陆框，而不是跳转到另一个页面，这样的好处是，用户与软件的人机交互变得更加友好，也会使操作更加流畅。下面的例子就是使用jQuerydialog实现这样一个功能。

登陆界面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" href="js/style.css">



<script type="text/javascript">


function dialog_login(){
//var src="demo1.jsp";

//$("#myModal_frame").attr("src",src);
$("#myModal_div").dialog({
autoOpen: true,
title: '欢迎登录',
width: 350,

buttons:{
登录:function(){
var ajaxurl="<%=path %>/user?op=log";
validateForm();
$.ajax({
url:ajaxurl,
type:"POST",
data: {username:$("#username").val(),
password:$("#password").val()},

success:function(result){
if (result == "1") {
alert("登录成功");
$("#myModal_div").dialog("close");
window.location="main.jsp";
} else if(result == "2"){
alert("用户名有误");
}else alert("密码有误，请重新输入");

}
});

},

取消:function(){
$("#myModal_div").dialog("close");

}

}

});
function validateId(id,msg){

$("#"+id).parent().find(".errmsg").html(msg);
}
function validateForm(){
var username = $("#username").val();
var password = $("#password").val();
if(null==username||''==username){
validateId("username","用户名不能为空");
}
if(null==password||''==password){
validateId("password","密码不能为空");
}

}
}

</script>
</head>
<body>
<button type="button" οnclick="dialog_login()">请登录</button>
<div id="myModal_div" style="display:none;" style="height: 300px" >

<form method="post" id="log">
<div>username: <input id="username" type="text"/><span class="errmsg"></span><br/></div>
<div>password: <input id="password" type="text"/><span class="errmsg"></span><br/></div>
</form>

</div>

</body>
</html>