Ajax 간단한 실용적인 케이스-JS 튜토리얼-php.cn

Ajax 간단한 실용적인 케이스

php中世界最好的语言

풀어 주다： 2018-03-31 17:23:29

원래의

1495명이 탐색했습니다.

이번에는 Ajax의 간단한 실제 사례를 들고 오겠습니다. 실제 전투에서 Ajax의 주의사항은 무엇인가요?

새로 고침 없이 간단한 Ajax 페이지 사용자 인증 사례를 구현하겠습니다.

효과는 아래와 같습니다.

주요 구현 프로세스:

checkUser 메소드에서 포그라운드의 양식 데이터를 수신하고 검증합니다. UsersAction 클래스에서 다양한 상황의 경우 상태 코드 코드를 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.액션 클래스

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>

로그인 후 복사

이 기사의 사례를 읽으신 후 메소드를 마스터하셨을 것입니다. 흥미로운 내용이 있으니 다른 PHP 중국어 웹사이트 관련 기사도 주목해주세요!