首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> Java 程式設計 >> Java 相關知識

SpringSide 實戰(六):AJAX 實戰——用戶註冊無刷新驗證的地獄之旅

     編輯:Java 相關知識

AJAX 適用場景

  1. 用戶不希望關注信息離開視線(表單提交驗證失敗不刷新、保留輸入)
  2. 局部更新避免整頁重載(長文章回復僅幾字)

單純為炫技用 AJAX 得不償失。

實戰需求:無刷新用戶註冊

流程:填寫表單 → 點擊提交 → 表單禁用、顯示「提交中」 → 服務端驗證 → 失敗顯示錯誤、表單啟用 → 成功提示並跳轉首頁。

技術選型:Prototype.js

SpringSide 內建,語法極簡:

var ajax = new Ajax.Request(url, {method: 'get', onComplete: onResponse});

四大坑與解法

1. 表單數據如何發送?

AJAX 不自動序列化表單,需手動拼接 URL 參數:

function onSubmit() {
  var url = 'RegUser.do?method=submit';
  var inputs = userForm.all.tags('input');
  for (var i=0; i<inputs.length; i++) {
    url += '&' + inputs[i].name + '=' + inputs[i].value;
    inputs[i].disabled = true;
  }
  showDoingMessage();
  new Ajax.Request(url, {method: 'get', onComplete: onResponse});
}

編碼陷阱:`@`、`#` 等特殊字符破壞 URL。`escape()` 導致中文亂碼。只能客戶端過濾非法字符。

2. 服務端返回什麼格式?

拒 XML(解析繁瑣),棄 JSON(當時較重),直接返回可執行 JavaScript 代碼:

function onResponse(request) { eval(request.responseText); }

服務端輸出如 name_err.innerHTML='用戶名不能為空'; failed(); 或 success();。

3. Struts Validator 失效?

AJAX 用 URL 參數傳遞,非 `` 提交,ActionForm 不自動封裝,Validator 無法使用。所有驗證邏輯移至服務端 Action 手寫。利用 SpringSide HibernateEntityDao 快速查重(用戶名、暱稱)。

4. 中文亂碼

AJAX 獨立線程,編碼由作業系統決定(GB2312)。雙向轉碼:

// 接收
String name = new String(request.getParameter('name').getBytes('ISO-8859-1'), 'GB2312');
// 發送
response.setCharacterEncoding('GB2312');
response.getOutputStream().println(result);
response.flushBuffer();

服務端核心代碼片段

public ActionForward submit(...) {
  boolean success = true; String result = '';
  User user = new User();
  // 驗證用戶名、暱稱、密碼、問題、Email、QQ、驗證碼...
  // 示例:用戶名
  String name = ...;
  if (empty) { success=false; result+=\"name_err.innerHTML='用戶名不能為空';\"; }
  else if (!name.matches('^[A-Za-z0-9_]*$')) { ... }
  else if (name.length() > 20) { ... }
  else if (userManager.isNotUnique(user, 'name')) { ... }
  else { result+=\"name_err.innerHTML='';\"; }
  // ... 其他字段類似
  if (!success) { result += 'failed();'; writeResponse(result); }
  else {
    if (isTokenValid(request)) { userManager.save(user); resetToken(request); }
    writeResponse('success();');
  }
  return null;
}

客戶端回調

function failed() { hideDoing(); enableForm(); }
function success() { showDoing('用戶註冊成功,將跳轉到首頁!', 'blue'); setTimeout(\"location.href='welcome.do';\", 4000); }

Action 配置

<action path="/RegUser" scope="request" parameter="method">
  <forward name="agree" path="/RegUser_Agree.jsp"/>
  <forward name="apply" path="/RegUser_Apply.jsp"/>
</action>
<bean name="/RegUser" class="com.xkland.action.RegUserAction"/>

結語

看似簡單的 AJAX 註冊,實則暗藏編碼、序列化、驗證框架失效、亂碼、瀏覽器兼容等重重陷阱,耗時兩天。AJAX 強大但請謹慎使用,做好防禦性編程。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved