Ajax的简单实用实例代码

前端  /  管理员 发布于 4年前   249

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

效果如下图：

实现主要过程：

在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="//article/<%=basePath%>" rel="external nofollow" > <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="//article/styles.css" rel="external nofollow" > --><script type="text/javascript" src="//article/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>

以上所述是小编给大家介绍的Ajax的简单实用实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！


  • 上一条：
    超全的js正则表达式整理笔记
    下一条：
    javascript高级程序设计(第三版)学习笔记（一） 正则表达式整理

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客