Button按钮提交from表单并验证之后数据清空

你知道的越多，你不知道的越多；本文仅做记录，方便以后备阅。希望也能帮到正在看这篇文章的你。

最近在项目中新增了一个页面，页面包含了四个同级的table。提交from表单的时候同事给介绍了一种方式，比较实用，在这里写个Demo分享给大家。

前端页面：

<form action="#" method="post" onsubmit="return subForm();" id="Form" name="Form">
请输入学号：
      <input type="text" id="xh" name="xh" value="">
请输入密码
      <input type="text" id="pd" name="pd" value="">
</form>
<span id="but"><button onclick="checkForm();">报工提交</button></span>
<script type="text/javascript" src="static/js/jquery.tips.js"></script>
//提交
<script type="text/javascript">
      function subForm(){
          $.ajax({
              type: "POST",
              url:'<%=basePath%>test/queryWorker.do',
              data:$("#Form").serialize(),
              dataType:'json',
              cache: false,
              success : function(data) {
                    if("success" == data.result){
                         $("#but").tips({
                               side:3,
                               msg:'提交成功！！！',
                               bg:'#AE81FF',
                               time:1
                         });
                         $("#but").focus();
                         $("#xh").val('');//清空数据
                    }
              }
           })
       }
 /*这里是提交表单前的非空校验*/
     function checkForm() {
        var xh= $("#xh").val();
        if (xh== "" || xh== null || xh== undefined) {
             $("#xh").tips({
                 side:3,
                 msg:'不允许为空!',
                 bg:'#AE81FF',
                 time:2
             });
             $("#xh").focus();
             return false;/*阻止表单提交*/
        }else{
             return subForm();
        }
</script>

 后端Controller层：

    @RequestMapping(value="/queryWorker")
    @ResponseBody
    public Object queryWorker() throws Exception{
        PageData pd = new PageData();        
        Map<String,Object> map = new HashMap<String,Object>();
        String errInfo = "";
        pd = this.getPageData();
        //接收前台jsp传值     
        String xh=pd.get("xh").toString;
        String pd=pd.get("pd").toString;
        errInfo = "success";
        map.put("result", errInfo);
        return AppUtil.returnObject(pd, map);
    }

 后端AppUtil工具类：

import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import org.codehaus.jackson.map.util.JSONPObject;

/** 
 * 接口参数校验
 * 公众号:NoHacker
 * @Author NoHacker
 */
public class AppUtil  {
    
    protected static Logger logger = Logger.getLogger(AppUtil.class);
    
    /**检查参数是否完整
     * @param method
     * @param pd
     * @return
     */
    public static boolean checkParam(String method, PageData pd){
        boolean result = false;
     
        int falseCount = 0;
        String[] paramArray = new String[20];
        String[] valueArray = new String[20];
        String[] tempArray  = new String[20];  //临时数组
        
        if(method=="registered"){// 注册
            paramArray = Const.APP_REGISTERED_PARAM_ARRAY;  //参数
            valueArray = Const.APP_REGISTERED_VALUE_ARRAY;  //参数名称
            
        }else if(method=="getAppuserByUsernmae"){//根据用户名获取会员信息
            paramArray = Const.APP_GETAPPUSER_PARAM_ARRAY;  
            valueArray = Const.APP_GETAPPUSER_VALUE_ARRAY;
        }
        int size = paramArray.length;
        for(int i=0;i<size;i++){
            String param = paramArray[i];
            if(!pd.containsKey(param)){
                tempArray[falseCount] = valueArray[i]+"--"+param;
                falseCount += 1;
            }
        }
        if(falseCount>0){
            logger.error(method+"接口，请求协议中缺少 "+falseCount+"个 参数");
            for(int j=1;j<=falseCount;j++){
                logger.error("   第"+j+"个："+ tempArray[j-1]);
            }
        } else {
            result = true;
        }    
        return result;
    }   
    /**
     * 设置分页的参数
     * @param pd
     * @return
     */
    public static PageData setPageParam(PageData pd){
        String page_now_str = pd.get("page_now").toString();
        int pageNowInt = Integer.parseInt(page_now_str)-1;
        String page_size_str = pd.get("page_size").toString(); //每页显示记录数
        int pageSizeInt = Integer.parseInt(page_size_str);
        String page_now = pageNowInt+"";
        String page_start = (pageNowInt*pageSizeInt)+"";
        pd.put("page_now", page_now);
        pd.put("page_start", page_start);
        return pd;
    }
    
    /**设置list中的distance
     * @param list
     * @param pd
     * @return
     */
    public static List<PageData>  setListDistance(List<PageData> list, PageData pd){
        List<PageData> listReturn = new ArrayList<PageData>();
        String user_longitude = "";
        String user_latitude = "";
        try{
            user_longitude = pd.get("user_longitude").toString(); //"117.11811";
            user_latitude  = pd.get("user_latitude").toString();  //"36.68484";
        } catch(Exception e){
            logger.error("缺失参数--user_longitude和user_longitude");
            logger.error("lost param：user_longitude and user_longitude");
        }
        PageData pdTemp = new PageData();
        int size = list.size();
        for(int i=0;i<size;i++){
            pdTemp = list.get(i);
            String longitude = pdTemp.get("longitude").toString();
            String latitude = pdTemp.get("latitude").toString();
            String distance = MapDistance.getDistance(
                        user_longitude,    user_latitude,
                        longitude,        latitude
                    );
            pdTemp.put("distance", distance);
            pdTemp.put("size", distance.length());
            listReturn.add(pdTemp);
        }
        return listReturn;
    }  
    /**
     * @param pd
     * @param map
     * @return
     */
    public static Object returnObject(PageData pd, Map map){
        if(pd.containsKey("callback")){
            String callback = pd.get("callback").toString();
            return new JSONPObject(callback, map);
        }else{
            return map;
        }
    }
}

后端PageData类：

import java.math.BigDecimal;
import java.util.Collection;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;
import javax.servlet.http.HttpServletRequest;
/** 
 * 说明：参数封装Map
 * 公众号:NoHacker
 * @Author NoHacker
 */
public class PageData extends HashMap implements Map{
    
    private static final long serialVersionUID = 1L;
    
    Map map = null;
    HttpServletRequest request;
    public PageData(HttpServletRequest request){
        this.request = request;
        Map properties = request.getParameterMap();
        Map returnMap = new HashMap(); 
        Iterator entries = properties.entrySet().iterator(); 
        Map.Entry entry; 
        String name = "";  
        String value = "";  
        while (entries.hasNext()) {
            entry = (Map.Entry) entries.next(); 
            name = (String) entry.getKey(); 
            Object valueObj = entry.getValue(); 
            if(null == valueObj){ 
                value = ""; 
            }else if(valueObj instanceof String[]){ 
                String[] values = (String[])valueObj;
                for(int i=0;i<values.length;i++){ 
                     value = values[i] + ",";
                }
                value = value.substring(0, value.length()-1); 
            }else{
                value = valueObj.toString(); 
            }
            returnMap.put(name, value); 
        }
        map = returnMap;
    }
    
    public PageData() {
        map = new HashMap();
    }  
    @Override
    public Object get(Object key) {
        Object obj = null;
        if(map.get(key) instanceof Object[]) {
            Object[] arr = (Object[])map.get(key);
            obj = request == null ? arr:(request.getParameter((String)key) == null arr:arr[0]);
        } else {
            obj = map.get(key);
        }
        return obj;
    }  
    public String getString(Object key) {
        return (String)get(key);
    }  
    public Date getDate(Object key) {
        return (Date)get(key);
    }
    public Integer getInteger(Object key) {
        return (Integer)get(key);
    }    
    public Double getDouble(Object key) {
        return (Double)get(key);
    }    
    public Float getFloat(Object key) {
        return (Float)get(key);
    }    
    public Short getShort(Object key) {
        return (Short)get(key);
    }    
    public BigDecimal getBigDecimal(Object key) {
        return (BigDecimal)get(key);
    }   
    @Override
    public Object put(Object key, Object value) {
        return map.put(key, value);
    }   
    @Override
    public Object remove(Object key) {
        return map.remove(key);
    }
    public void clear() {
        map.clear();
    }
    public boolean containsKey(Object key) {
        return map.containsKey(key);
    }
    public boolean containsValue(Object value) {
        return map.containsValue(value);
    }
    public Set entrySet() {
        return map.entrySet();
    }
    public boolean isEmpty() {
        return map.isEmpty();
    }
    public Set keySet() {
        return map.keySet();
    }
    @SuppressWarnings("unchecked")
    public void putAll(Map t) {
        map.putAll(t);
    }
    public int size() {
        return map.size();
    }
    public Collection values() {
        return map.values();
    } 
}

---

欢迎大家评论转发，收藏！

由于水平有限，本博客难免有不足，恳请各位大佬不吝赐教！