使用artDialog与AJAX实现登陆框的JSP示例-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_20932/article/details/82544527

1，下载artDialog

2，在JSP里面引入。

3，使用。

相关JSP代码如下：

这里是通过使用artDialog来弹出一个登陆框，在通过AJAX来与后台交互。

<%@ 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">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>artDialog登陆测试</title>
    
	<script type="text/javascript" src="<%=basePath%>artDialog/artDialog.js?skin=blue"></script>
	<script type="text/javascript" src="<%=basePath%>artDialog/artDialog.js"></script>
	<script type="text/javascript">
		function test(){
		
			
		art.dialog({
    
    title: '登录',//标题
    content: '帐号：<input id="login-na" type="text" value="guest" />'
        + '<br />密码：<input id="login-pw" type="text" value="333" />',
    initialize: function () {
        document.getElementById('login-na').focus();
        
    },
    lock: true,//锁屏
    
    fixed: true,//可以拖动
    ok: function () {
        var pwd = document.getElementById('login-pw').value;
        var name = document.getElementById('login-na').value;
       
        
       	//执行登录的ajax
       	$.ajax({
		    url: 'AjaxTest.action?name='+name+'&pwd='+pwd,
		    success: function (data) {
		    
		    	if(data==1){
		    	//如果登录错误
		    			art.dialog({
						    content: '用户名或密码错误',
						    time:2
						});
						
		    	} else {
					window.location.reload();//登录成功，重新刷新页面 或者 window.location.href="xx.action";		    	
		    	}
		    },
		    
		});
       	
       	
       	
        return false;//保持登录款不消失
    },
    okValue: '登录',//登录按钮的名称
    cancel: function () {
    	alert('取消登录')
    }
});
		
		}
	</script>
  </head>
  
  <body>
    <a οnclick="test();" href="javascript:;">登录</a>
  </body>
</html>

artDialog使用