利用AJAX是想JSP页面的单个控件的后台校验

来源:互联网 发布:都匀皓轩网络 编辑:程序博客网 时间:2024/05/10 15:20

 

xml:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../../../../common/common-js.jsp"%>
<%@ include file="../../../../common/common-taglibs.jsp"%>
<%@ include file="../../../../common/common-css.jsp"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
 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%>">

  <title>My JSP 'addMenu.jsp' starting page</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">
  <style type="text/css">
a {
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

tr {
 background-color: #D8E4F2;
}
</style>
  <script type="text/javascript">
function addMenu11() {
 var common_d0020 = document.getElementById("d0020").value;
 var common_d0030 = document.getElementById("d0030").value;
 if (common_d0020.replace(/^\s*|\s*$/g, '') == "") {
  alert("分类名称不能为空,请重新输入!");
 } else if (common_d0030.replace(/^\s*|\s*$/g, '') == "") {
  alert("排序不能为空,请重新输入!");
 } else if (common_d0020.length > 50) {
  alert("分类名称长度不超过50,请重新输入!");
 } else if (common_d0030.length > 20) {
  alert("排序长度超过20,请重新输入!");
 } else {
  document.forms[0].action = "{ctx}/menuCategoriesManager/addMenu.do";
  document.forms[0].submit();
 }

}

function checkNull(temp) {
 if (temp.replace(/^\s*|\s*$/g, '') == "") {
  return false;
 } else {
  return true;
 }
}

function checkAjax(str){
       //定义一个变量用于存放XMLHttpRequest对象
       var xmlhttp;
       //定义一个变量用于存放 从服务器返回的响应结果   
          var responseContext="";
          //页面控件值
          var td02 = document.getElementById("d0020").value;
          var td03 = document.getElementById("d0030").value;
          if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
       responseContext = xmlhttp.responseText;
        if(checkNull(responseContext)){
         alert(responseContext);
         if(str==2){
        document.getElementById("d0020").focus();
       }else if(str==3){
        document.getElementById("d0030").focus();
       }
        }      
      }
    }
    //向指定的URL建立服务器的调用
    var url="";
    if(str==2){
     url="{ctx}/menuCategoriesManager/checkData.do?tempd0020="+td02;
    }else{
     url="{ctx}/menuCategoriesManager/checkData.do?tempd0030="+td03;
    }
       xmlhttp.open("POST",url,true);
       xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlhttp.send();
      }

  


</script>
 </head>

 <body>
  <form id="updateMenuForm"
   action="${ctx}/menuCategoriesManager/addMenu.do" method="post">

   <table style="border-collapse: collapse;">

    <tr style="background-color: #D8E4F2;">
     <td style="vertical-align: middle; text-align: center;">
      分类名称
     </td>
     <td>
      <input type="text" name="d0020" id="d0020" style="width: 100px"
       onblur="checkAjax(2)" />
      <input type="hidden" name="d0910" id="d0910" value="1"
       style="width: 100px" />
     </td>
    </tr>
    <tr style="background-color: #D8E4F2;">
     <td style="vertical-align: middle; text-align: center;">
      排序
     </td>
     <td>
      <input type="text" name="d0030" id="d0030"
       onkeyup="this.value=this.value.replace(/\D/g,'')"
       onafterpaste="this.value=this.value.replace(/\D/g,'')"
       style="ime-mode: disabled" style="width: 100px"
       onblur="checkAjax(3)" />
     </td>
    </tr>
    <tr style="background-color: #D8E4F2;">
     <td align="right" align="right" colspan="2">
      <input type="button" name="addMenu" value="添加"
       onclick="addMenu11()" />
      &nbsp;&nbsp;
      <input type="button" name="" value="返回"
       onclick="javascript:history.back(-1);" />
     </td>
    </tr>
   </table>
 </body>
</html>

 

 

action里的方法:

 /**
  * 校验输入不重复
  *
  * @return
  */
 public String checkData() throws Exception {
  try {
   String reponseText = "";
   String d0020 = "";
   HttpServletRequest request2 = ServletActionContext.getRequest();
   String d0020value = request2.getParameter("tempd0020");
   String d0030 = request2.getParameter("tempd0030");
   if (d0020value != null) {
    d0020 = new String(d0020value.getBytes("ISO8859-1"), "GB2312");

   }
   int size = 0;
   if (null != d0020 && !"".equals(d0020)) {
    size = menucategoriesService.checkAjax(d0020);
    if (size != 0) {
     reponseText = "分类名称重复,请重新输入";
    }
   }
   if (null != d0030 && !"".equals(d0030)) {
    size = menucategoriesService.checkAjax3(d0030);
    if (size != 0) {
     reponseText = "排列序号重复,请重新输入";
    }
   }
   HttpServletResponse response = ServletActionContext.getResponse();
   response.setContentType("text/plain");
   response.setCharacterEncoding("UTF-8");
   PrintWriter out = response.getWriter();
   out.println(reponseText);
   out.flush();
   out.close();
  } catch (Exception e) {
   // TODO: handle exception
   e.printStackTrace();
  }
  return null;
 }


原创粉丝点击