Ajax的简单实用实例

2017-05-05 16:39

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

效果如下图:

Ajax的简单实用实例0

实现主要过程:

在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>