如何用phototype框架实现一个简单的ajax验证

最新推荐文章于 2026-06-22 15:35:59 发布

原创最新推荐文章于 2026-06-22 15:35:59 发布 · 905 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #框架 #webwork #parameters #action

ｗｅｂ　　ｊａｖａ专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用Phototype框架实现简单的AJAX验证功能。通过下载并引入phototype.js，结合前端HTML与后端Java代码，可以轻松完成用户名可用性的实时检查。

如何用phototype框架实现一个简单的ajax验证：
依靠phototype很容易实现
1，首先下载一个phototype.js文件并将它放在你的工程中，在需要ajax验证的页面中导入该js文件
2，创建一个简单的ftl页面中加入如下代码
<#include "/error/actionerrors.ftl">
<#assign base=req.contextPath />

<td>*用户名:</td><td><input type="text" name="loginName" id="loginName" size="21" height="21" maxlength="16" onblur="searchSales();"/>
<div id="result"/>
</td>

<script>
function searchSales(){
　　var loginName = $('loginName').value;
　　var url = '${base}/regist/checkName.action';
　　var pars = 'loginName=' + loginName;
　　var myAjax = new Ajax.Request(
　　url,
　　{
　　method: 'get',
　　parameters: pars,
　　onComplete: showResponse
　　});
　　}
　　function showResponse(originalRequest){
　　//put returned XML in the textarea
  var resultDiv=$('result');
  resultDiv.innerHTML= originalRequest.responseText;
　　}
</script>

3，编写一个action用于处理ajax传来的请求，请注意我是在webwork2框架下，个人可以根据情况适当的修改，步骤大体都一样
package action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.opensymphony.webwork.ServletActionContext;
import com.opensymphony.xwork.ActionContext;

import domain.Admin;

public class CheckNameAction extends BaseAction{

//ServletActionContext.APPLICATION;
//ServletActionContext.SESSION;
//ServletActionContext.PAGE_CONTEXT;

public String execute(){
  ActionContext ctx = ActionContext.getContext();
  //在webwork中获得request对象
  HttpServletRequest request = (HttpServletRequest)ctx.get(ServletActionContext.HTTP_REQUEST);
  //在webwork中获得response对象
  HttpServletResponse response = (HttpServletResponse)ctx.get(ServletActionContext.HTTP_RESPONSE);
  String loginName=request.getParameter("loginName");
  try {
   response.setContentType("text/html");
   response.setCharacterEncoding("UTF-8");
   response.setHeader("Cache-Control", "no-cache");
   response.setHeader("Pragma", "no-cache");
   List<Admin> list=this.getLoginService().listAdmin();
   int count =0;
   if(list.size()!=0){
    for(Admin admin : list){
     if(admin.getUserName().equals(loginName)){
      count++;
      break;
     }
    }
   }
   PrintWriter out = response.getWriter();
   if(count==0)
    out.println("<font color='green'>恭喜你，用户名可用！</font>");
   else
    out.println("<font color='red'>很抱歉，用户名不可用！</font>");
   out.flush();
   out.close();
  } catch (IOException e) {
   e.printStackTrace();
  }
  return null;
}
}
经过着3大部，然后我们再配置一下action，就可以使用了，很方便。