jQuery实现用户登录的异步刷新

JQUERY教程手机阅读

没事用SSH搞个OA练练手顺便搞了下异步刷新
index.jsp:

Java代码 [url=#][/url]

1.<%@ page language="java"
import="java.util.*" pageEncoding="UTF-8"%>
2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3.<html>
4. <head>
5.    <title>WebOa办公自动化系统</title>
6.    <link rel="stylesheet" type="text/css" href="css/mycss.css">
7.    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
8.    <script type="text/javascript" src="js/index_deal.js"></script>
9.    <script type="text/javascript">
10.
//刷新页面刷新页面后清空表单数据

11.    function fresh()
12.    {
13.

14.        document.getElementById("password_id").value="";
15.        document.getElementById("verify_id").value="";
16.    }
17.    </script>
18. </style>
19. </head>
20.

21. <body onUnload="fresh()">
22. <table width="80%" border="0" align="center">
23.    <tr>
24.      <td> </td>
25.    </tr>
26.    <tr>
27.      <td align="right" valign="bottom"
class="tdclass">
28.      <div id="apDiv1">
29.      用户名:<input type="text" name="username" id="username_id"
class="input_class"/><div id="username_message"></div>
30.      <br/>
31.      密<font face="宋体">  </font>码:<input type="password" name="password" id="password_id"
class="input_class"/><div id="password_message"></div>
32.      <br/>
33.      验证码:<input name="verify" id="verify_id"
class="input_class" type="text" size="4" maxlength="4"/><div id="verify_message"></div>
34.      <br/>
35.      <input type="button" id="submit_id" value="登录"/>
36.      <input type="reset" id="reset_id" value="重置"/>
37.      </div></td>
38.    </tr>
39. </table>
40. </body>
41.</html>
fresh()函数用来当页面被刷新时使用将密码和验证码清空
index_deal.js:

Java代码
1.// JavaScript Document
2.$(function(){
3.$("#username_id").select();
4.$(this).removeClass("input_class");
5.$("#submit_id").click(function(){
6.var username=$("#username_id").val();
7.var password=$("#password_id").val();
8.var verify=$("#verify_id").val();
9.if(username=="")
10.    {
11.    //显示提示信息
12.    $("#username_message").html("<font color='red'>用户名不能为空</font>");
13.    return;
14.    }
15.    else if(password=="")
16.    {
17.    $("#password_message").html("<font color='red'>密码不能为空</font>");
18.    return;
19.    }
20.    else if(verify=="")
21.    {
22.    $("#verify_message").html("<font color='red'>请输入验证码</font>");
23.    return;
24.    }
25.});
26.
27.$("#username_id,#password_id,#verify_id").keyup(function(){
28.var nodeval=$(this).val();
29.if(nodeval=="")
30.{
31.$(this).addClass("input_class");
32.}
33.else
34.{
35.$(this).removeClass("input_class");
36.//这是当表单值为空时点击登录的话会显示用户名不存在当输入值之后这个提示信息会消失
37.if($(this).attr("id")=="username_id")
38.{
39.$("#username_message").html("");
40.}
41.else if($(this).attr("id")=="password_id")
42.{
43.$("#password_message").html("");
44.}
45.else if($(this).attr("id")==$("verify_id"))
46.{
47.    $("#verify_message").html("");
48.}
49.
50.}
51.});
52.
53.});
页面加载完成首先执行一下$(this).removeClass("input_class");是因为用户名填写好后刷新的话页面上依旧有红色提示框但是文本框中还有内容别的就不上了 jQuery其实挺简单的无意间看了一点儿就大概知道怎么玩儿了所以就搞了一下呵呵