Ajax的简单实用实例代码

更新时间：2017年05月05日 15:27:16 投稿：mrr

这篇文章主要介绍了Ajax的简单实用实例代码,需要的朋友可以参考下

我将实现一个简单的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="<%=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="styles.css" rel="external nofollow" >
 -->
<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>

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

您可能感兴趣的文章:

ajax
实例

聊一聊Ajax的优缺点
和大家一起聊一聊Ajax的优缺点，Ajax是一个动态的WEB应用的开发技术，它的出现丰富了用户的体验，今天就和大家进一步的了解Ajax,感兴趣的小伙伴们可以参考一下
2016-02-02
基于Jquery.history解决ajax的前进后退问题
本文主要给大家介绍基于Jquery.history解决ajax的前进后退问题，涉及到jquery前进后退相关方面的知识，本文内容经典，非常具有参考价值，特此把jquery前进后退相关知识分享在脚本之家网站供大家参考
2015-10-10
使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页
本文给大家介绍基于jquery+ajax+json实现数据分页显示，以及JAVA+JQuery实现异步分页，本文代码简单易懂，非常具有参考价值，感兴趣的朋友一起学习吧
2015-10-10
AJax与Jsonp跨域访问问题小结
本文给大家汇总介绍了JavaScript的AJax，JQuery的AJax以及利用jsonp实现跨域访问的问题，非常的细致全面，有需要的小伙伴可以参考下。
2015-12-12
AJAX的阻塞及跨域名解析
AJAX的阻塞及跨域名解析...
2007-07-07
ajax session过期问题的几个解决方案
现在web开发中，ajax应用的比较多。关于此方面的框架也不少。在应用中都会遇到session过期的问题
2009-07-07
jQuery Ajax方式上传文件的方法
这篇文章主要介绍了jQuery Ajax方式上传文件的方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
ASP.NET与Ajax的实现方式小总结
Ajax 应该不是一项技术，是一种思想而已，跟 ASP.NET 以及其它 Web 开发语言没有什么太大关系，这里只是谈谈 ASP.NET 中目前使用的 Ajax 技术以及其它一些实现 Ajax 的优秀框架。感兴趣的朋友跟着小编一起学习asp.net与ajax的实现方式
2015-09-09
通达OA 使用Ajax和工作流插件实现根据人力资源系统数据增加OA账号(图文详解)
这篇文章主要介绍了通达OA 使用Ajax和工作流插件实现根据人力资源系统数据增加OA账号(图文详解),需要的朋友可以参考下
2016-12-12
js ajax加载时的进度条代码
在web页面中使用ajax加载进度条，可以让用户预先判断等待的时间，而且还可以减少用户等待信息加载过程中的心理焦虑感，所以进度条加载必不可少，下面小编给大家介绍ajax加载进度条代码是如何实现的
2015-10-10

Ajax的简单实用实例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具