Ajax のシンプルで実用的なケース

今回は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

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 
 <base>" rel="external nofollow" >
 <title>Ajax练习</title>
 <meta>
 <meta>
 <meta> 
 <meta>
 <meta>
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" >
 -->
<script></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>
 
 
 

                                             

用户注册
账号:	*
密码:	*

 

 
 

この記事の事例を読んだ後、メソッドを習得したと思います。エキサイティングなコンテンツなので、他の php 中国語 Web サイト関連の記事にも注目してください。

推奨読書:

Ajax を使用してデータを動的にロードする方法

Ajax を使用してファイルアップロードのプログレスバーを実装する方法 Codular

以上がAjax のシンプルで実用的なケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。