Einfacher und praktischer Beispielcode von Ajax-js-Tutorial-php.cn

Einfacher und praktischer Beispielcode von Ajax

韦小宝

Freigeben： 2018-01-01 19:39:04

Original

1384 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der einfache und praktische Beispielcode von Ajax vorgestellt. Freunde, die sich für Ajax interessieren, können sich auf die einfache und praktische Methode von Ajax beziehen.

Ich werde eine einfache Ajax-Seite zur Benutzerüberprüfung implementieren, ohne sie zu aktualisieren . Fall:

Der Effekt ist wie folgt:

Implementierung des Hauptprozesses:

Erhalten und überprüfen Sie den Vordergrund im checkUser Methode in der UsersAction-Klasse Die Formulardaten geben für verschiedene Situationen einen Statuscodecode an die JSP-Seite zurück und verwenden dann die $.post-Methode in ajax1.jsp, um den vom Hintergrund übergebenen Statuscode

zu akzeptieren unterschiedliche Reaktionen.

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

Nach dem Login kopieren

2.Aktionsklasse

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Das Obige ist ein einfacher und praktischer Beispielcode von Ajax, der vom Herausgeber eingeführt wurde. Ich hoffe, er wird für alle hilfreich sein!

Verwandte Empfehlungen:

Detaillierte Erläuterung des Beispiels für den Ajax-Eingabeaufforderungseffekt

Mitteilung über die Methode des Ajax-Springens zu einer neuen JSP-Seite

Details zur Verwendung von Ajax zur teilweisen Aktualisierung von Razor-Seiten

Das obige ist der detaillierte Inhalt vonEinfacher und praktischer Beispielcode von Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!