1,页面登陆代码:
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <html>
- <head>
- <title>jquery登陆</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- // username 获取光标 $("#username").focus();
- });
- function checkForm(){
- var name = $("#username").val();
- if(name.length<=0){
- $("#msgName").html("the username is null!");
- return false;
- }else{
- $("#msgName").html("");
- }
- var pass = $(".password").val();
- if(pass.length<=0){
- $("#msgPass").html("the password is null!");
- return false;
- }else{
- $("#msgPass").html("");
- }
- // 提交到后台进行验证
- $.ajax({ type: "POST",// 指定是post还是get,当然此处要提交,当然就要用post了
- cache: "false",//默认: true,dataType为script时默认为false) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
- url: "login.do?method=login",//发送请求的地址。
- data: "username=" + name + "&password=" + pass ,//发送到服务器的数据
- dataType: "text",//返回纯文本字符串 timeout:20000,// 设置请求超时时间(毫秒)。
- error: function () {//请求失败时调用函数。
- $("#msg").html("请求失败!"); }, success://请求成功后回调函数。
- function(message) {
- $("#msg").html(message);
- }
- }); return false;
- }
- </script>
- </head>
- <body>
- <form action="" method="post" onSubmit="return checkForm()">
- <table width="388" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td colspan="2">
- <span id="msg" style="color: red"></span>
- </td>
- </tr>
- <tr>
- <td width="92">
- 用户名:
- </td>
- <td width="280">
- <input type="text" name="username" id="username">
- <span id="msgName" style="color: red"></span>
- </td>
- </tr>
- <tr>
- <td>
- 密码:
- </td>
- <td>
- <input type="password" name="password" id="password"
- class="password">
- <span id="msgPass" style="color: red"></span>
- </td>
- </tr>
- <tr>
- <td colspan="2">
- <input type="submit" name="button" value="submit">
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>