jQuery实现用户登录的异步刷新
没事用SSH搞个OA练练手 顺便搞了下异步刷新
index.jsp:
<!--author jeedroid-->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>WebOa办公自动化系统</title><link rel="stylesheet" type="text/css" href="css/mycss.css"><script type="text/javascript" src="js/jquery-1.7.1.js"></script><script type="text/javascript" src="js/index_deal.js"></script><script type="text/javascript">//刷新页面 刷新页面后清空表单数据function fresh(){document.getElementById("password_id").value="";document.getElementById("verify_id").value="";}</script> </style> </head> <body onUnload="fresh()"> <table width="80%" border="0" align="center"> <tr> <td> </td> </tr> <tr> <td align="right" valign="bottom" name="username" id="username_id" name="password" id="password_id" id="verify_id" type="text" size="4" maxlength="4"/><div id="verify_message"></div> <br/> <input type="button" id="submit_id" value="登录"/> <input type="reset" id="reset_id" value="重置"/> </div></td> </tr> </table> </body></html>// JavaScript Document$(function(){$("#username_id").select();$(this).removeClass("input_class");$("#submit_id").click(function(){var username=$("#username_id").val();var password=$("#password_id").val();var verify=$("#verify_id").val();if(username==""){//显示提示信息$("#username_message").html("<font color='red'>用户名不能为空</font>");return;}else if(password==""){$("#password_message").html("<font color='red'>密码不能为空</font>");return;}else if(verify==""){$("#verify_message").html("<font color='red'>请输入验证码</font>");return;}});$("#username_id,#password_id,#verify_id").keyup(function(){var nodeval=$(this).val();if(nodeval==""){$(this).addClass("input_class");}else{$(this).removeClass("input_class");//这是当表单值为空时点击登录的话会显示用户名不存在 当输入值之后这个提示信息会消失if($(this).attr("id")=="username_id"){$("#username_message").html("");}else if($(this).attr("id")=="password_id"){$("#password_message").html("");}else if($(this).attr("id")==$("verify_id")){$("#verify_message").html("");}}});});