Heim > Artikel > Web-Frontend > Ajax einfacher praktischer Koffer

Ajax einfacher praktischer Koffer

php中世界最好的语言Original: 2018-03-31 17:23:291496Durchsuche

Dieses Mal werde ich Ihnen einen einfachen praktischen Fall von Ajax vorstellen. Was sind die Vorsichtsmaßnahmen für Ajax im tatsächlichen Kampf?

Ich werde einen einfachen Ajax-Seitenbenutzerüberprüfungsfall ohne Aktualisierung implementieren:

Der Effekt ist wie folgt:

Der Hauptprozess von Implementierung:

Empfangen und überprüfen Sie die Formulardaten aus dem Vordergrund in der checkUser-Methode in der UsersAction-Klasse. Geben Sie je nach Situation einen Statuscode-Code an die JSP-Seite zurück und akzeptieren Sie dann die Hintergrundübertragung über $ .post-Methode in ajax1.jsp Der Statuscode

reagiert unterschiedlich.

Der spezifische Code lautet wie folgt:

1. Entitätsklasse

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();
 }
}

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;
 }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

<%@ 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>

Empfohlene Lektüre:

So verwenden Sie Ajax, um Daten dynamisch zu laden

So verwenden Sie Ajax, um den Fortschrittsbalken zu implementieren des Hochladens von Dateien Codular

Das obige ist der detaillierte Inhalt vonAjax einfacher praktischer Koffer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie man Abschlüsse in js verstehtNächster Artikel：Wie man Abschlüsse in js versteht

In Verbindung stehende Artikel

Mehr sehen