快捷導(dǎo)航

Ajax的簡單實(shí)用實(shí)例代碼

更新時間：2017年05月05日 15:27:16 投稿：mrr

這篇文章主要介紹了Ajax的簡單實(shí)用實(shí)例代碼,需要的朋友可以參考下

我將實(shí)現(xiàn)一個簡單的Ajax頁面無刷新進(jìn)行用戶驗(yàn)證案例：

效果如下圖：

實(shí)現(xiàn)主要過程：

在UsersAction類中的checkUser方法中接收并驗(yàn)證前臺的表單數(shù)據(jù)，針對不同情況，返回一個狀態(tài)碼code給jsp頁面，然后在ajax1.jsp中通過$.post方法接受后臺傳遞過來的狀態(tài)碼

做出不同的響應(yīng)。

具體代碼如下：

1.實(shí)體類

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類

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練習(xí)</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() {
   //獲取數(shù)據(jù)
   var uname = $("#uname").val();
   var passwd = $("#passwd").val();
   //將數(shù)據(jù)組織為json格式
   var json = {"us.uname":uname,"us.passwd":passwd};
   //進(jìn)行異步請求
   $.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>

以上所述是小編給大家介紹的Ajax的簡單實(shí)用實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

這篇文章給大家介紹jquery ajax技術(shù)實(shí)現(xiàn)每隔一段時間向某頁面?zhèn)髦?，以及setinterval()方法的語法介紹，對本文感興趣的朋友可以參考下
2015-10-10

springmvc 結(jié)合ajax批量新增的實(shí)現(xiàn)方法

這篇文章主要介紹了springmvc 結(jié)合ajax批量新增的實(shí)現(xiàn)方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

2020-11-11

jsp+ajax實(shí)現(xiàn)無刷新上傳文件的方法

這篇文章主要介紹了jsp+ajax實(shí)現(xiàn)無刷新上傳文件的方法,結(jié)合實(shí)例形式分析了ajax無刷新上傳文件及jsp后臺處理的相關(guān)技巧,需要的朋友可以參考下

2016-01-01

bootstrap select2 動態(tài)從后臺Ajax動態(tài)獲取數(shù)據(jù)的代碼

這篇文章主要介紹了bootstrap select2 動態(tài)從后臺Ajax動態(tài)獲取數(shù)據(jù)的代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

2019-12-12

jquery中的ajax如何返回結(jié)果而非回調(diào)方式即為同順序執(zhí)行

默認(rèn)ajax是異步的，也就是在未響應(yīng)到結(jié)果時不影響向下的執(zhí)行，如果非要返回結(jié)果的話，將ajax 中的參數(shù) async 改為 false，即為同順序執(zhí)行

2014-05-05

ajax中的async屬性值之同步和異步及同步和異步區(qū)別

在Jquery中ajax方法中async用于控制同步和異步，當(dāng)async值為true時是異步請求，當(dāng)async值為fase時是同步請求。ajax中async這個屬性，用于控制請求數(shù)據(jù)的方式，默認(rèn)是true，即默認(rèn)以異步的方式請求數(shù)據(jù)。

2015-10-10