欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Ajax的简单实用实例代码

程序员文章站 2022-03-04 17:07:09
我将实现一个简单的ajax页面无刷新进行用户验证案例: 效果如下图: 实现主要过程: 在usersaction类中的checkuser方法中接收并验证前台的表单数...

我将实现一个简单的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的简单实用实例代码,希望对大家有所帮助