Ajax的简单实用实例

我将实现一个简单的Ajax页面无刷新进行用户验证案例：

效果如下图：

aaarticlea/png;base64,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" alt="" width="467" height="96" />

实现主要过程：

在UsersAction类中的checkUser方法中接收并验证前台的表单数据，针对不同情况，返回一个状态码code给jsp页面，然后在ajax1.jsp中通过$.post方法接受后台传递过来的状态码

做出不同的响应。

具体代码如下：

1.实体类

package com.bean;

import java.io.Serializable;

public class Users implements Serializable {
    private String uname;
    private String passwd;

    public String getUname() {
        return uname;
    }
    public void setUname(String uname) {
        this.uname = uname;
    }
    public String getPasswd() {
        return passwd;
    }
    public void setPasswd(String passwd) {
        this.passwd = passwd;
    }
    public Users(String uname, String passwd) {
        super();
        this.uname = uname;
        this.passwd = passwd;
    }
    public Users() {
        super();
    }

}

2.action类

package com.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;

import com.bean.Users;

public class UsersAction {
    private Users us;

    public Users getUs() {
        return us;
    }

    public void setUs(Users us) {
        this.us = us;
    }
    @Action(value="checkUser")
    public String checkUser() {
        System.out.println("aaaaaaaaa");
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("utf-8");
        try {
            PrintWriter out = response.getWriter();
            int code = 0;
            if (us == null) {
                out.print(0);
                return null;
            } else {
                if (us.getUname() == null || us.getUname().trim().equals("")) {
                    code = 1;
                    out.print(code);
                    return null;
                } else {
                    if (us.getPasswd() == null
                            || us.getPasswd().trim().equals("")) {
                        code = 2;
                        out.print(code);
                        return null;
                    } else {
                        code = 200;
                        out.print(code);
                    }
                }

            }

            out.flush();
            out.close();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        return null;
    }
}

3.ajax1.jsp

<%@ 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>Ajax练习</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
    $(function() {
        $("#btok").click(function() {
            //获取数据
            var uname = $("#uname").val();
            var passwd = $("#passwd").val();
            //将数据组织为json格式
            var json = {"us.uname":uname,"us.passwd":passwd};
            //进行异步请求
            $.post("checkUser.action",json,function(msg){
                if(msg == '0') {
                    alert("用户名和密码错误！");
                    return;
                }
                if(msg == '1') {
                    $("#uerror").html("用户名错误！");
                    return;
                } else {
                    $("#uerror").html("*");
                }
                if(msg == '2') {
                    $("#perror").html("密码错误！");
                    return;
                } else {
                    $("#perror").html("*");
                }
                if(msg == '200') {
                    alert("登陆成功！");
                    return;
                }

            });

        });
    });
</script>
  </head>

  <body>
  <form name="form1" method="post" action="">
    <table width="450" border="1" align="center" cellpadding="1" cellspacing="0">
      <tr>
        <td colspan="2" align="center" valign="middle" bgcolor="#FFFFCC">用户注册</td>
      </tr>
      <tr>
        <td width="88">账号:</td>
        <td width="352"><label for="uname"></label>
        <input type="text" name="uname" id="uname">
        <span id="uerror" style="color:#F06;">*</span></td>
      </tr>
      <tr>
        <td>密码:</td>
        <td><label for="passwd"></label>
        <input type="password" name="passwd" id="passwd">
        <span id="perror" style="color:#F06;">*</span></td>
      </tr>
      <tr align="center" valign="middle" bgcolor="#FFFFCC">
        <td colspan="2"><input type="button" name="button" id="btok" value="确定">
        <input type="reset" name="button2" id="button2" value="重置"></td>
      </tr>
    </table>
  </form>
  <br>
  </body>
</html>