집 >웹 프론트엔드 >JS 튜토리얼 >간단하고 실용적인 Ajax 예제 코드

간단하고 실용적인 Ajax 예제 코드

韦小宝원래의: 2018-01-01 19:39:041350검색

이 글에서는 간단하고 실용적인 Ajax 예제 코드를 주로 소개합니다. Ajax에 관심 있는 친구들은 Ajax의 간단하고 실용적인 방법을 참고하시면 됩니다.

사용자 인증 케이스를 새로 고치지 않고 간단한 Ajax 페이지를 구현해 보겠습니다.

효과는 다음과 같습니다. 그림:

주요 구현 프로세스:

UsersAction 클래스의 checkUser 메소드에서 프런트 엔드에서 양식 데이터를 수신하고 확인합니다. 다른 상황에서는 JSP 페이지에 상태 코드 코드를 반환합니다. 그런 다음 ajax1.jsp에 $를 전달합니다. .post 메소드는 백그라운드에서 전달된 상태 코드

를 승인하고 다른 응답을 합니다.

구체적인 코드는 다음과 같습니다.

1.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练习</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 == &#39;0&#39;) {
     alert("用户名和密码错误！");
     return;
    }
    if(msg == &#39;1&#39;) {
     $("#uerror").html("用户名错误！");
     return;
    } else {
     $("#uerror").html("*");
    }
    if(msg == &#39;2&#39;) {
     $("#perror").html("密码错误！");
     return;
    } else {
     $("#perror").html("*");
    }
    if(msg == &#39;200&#39;) {
     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 예제 코드

관련 기사