Home>

I will implement a simple ajax page without user authentication case:

The effect is as follows:

Realize the main process:

Receive and verify the form data in the foreground in the checkuser method in the usersaction class.For different situations,Return a status code to the jsp page, and then accept the status code passed in the background through the $.post method in ajax1.jsp

Respond differently.

The specific code is as follows:

Entity class

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 class

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 exercise</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0"&​​gt;
 <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 () {
   //retrieve data
   var uname=$("#uname"). val ();
   var passwd=$("#passwd"). val ();
   //Organize data into json format
   var json={"us.uname":uname, "us.passwd":passwd};
   //Make an asynchronous request
   $.post ("checkuser.action", json, function (msg) {
    if (msg == "0") {
     alert ("Wrong username and password!");
     return;
    }
    if (msg == "1") {
     $("#uerror"). html ("The username is wrong!");
     return;
    } else {
     $("#uerror"). html ("*");
    }
    if (msg == "2") {
     $("#perror"). html ("Password error!");
     return;
    } else {
     $("#perror"). html ("*");
    }
    if (msg == "200") {
     alert ("Successful login!");
     return;
    }
   });
  });
 });
</script>
 </head>
 <body>
 <form name="form1" method="post" action="">
 <table width="450" ​​border="1" align="center" cellpadding="1" cellspacing="0"&​​gt;
  <tr>
  <td colspan="2" align="center" valign="middle" bgcolor="#ffffcc">User Registration</td>
  </tr>
  <tr>
  <td width="88"&Account:</td>
  <td width="352"><label for="uname"></label>
  <input type="text" name="uname">
  <span>*</span></td>
  </tr>
  <tr>
  <td>Password:</td>
  <td><label for="passwd"></label>
  <input type="password" name="passwd">
  <span>*</span></td>
  </tr>
  <tr align="center" valign="middle" bgcolor="#ffffcc">
  <td colspan="2"><input type="button" name="button" value="OK">
  <input type="reset" name="button2" value="Reset"</td>
  </tr>
 </table>
 </form>
 <br>
 </body>
</html>
  • Previous Android status bar customization and modification methods
  • Next IOS implements forced update function of app