改善Form提交数据的 UI 交互设计

改善Form提交数据的 UI 交互设计

让数据提交更友好

Form的数据提交需要改进的地方

• 1.数据一次校验

  完整的数据校验需要前台页面（JS）和后台程序分别做校验，虽然有Commons-validate 框架可以使用，但本质上还是分为这么2次校验。 如果校验出错或者程序出错，都是后台采用redirect的方式返回到前台，虽然采用了struts之类框架的都是forward到前台，如果要是做复杂和耗时的校验（比如要进行数据库校验），页面会长时间停留在后台页面，不是很友好和方便。

• 2.验证信息友好化,让验证码”躲”起来

  为了防止机器提交，都会采用验证码机制，对于正常操作的用户，每次都要输入验证码,显然不够不友好的，如果提交的时候能够做判断，如果是正常提交就不需要验证码，如果是被认定为机器提交，诸如连续提交等行为，则提示需要输入验证码才能提交数据，这样显然就进了一步。

• 3.提交过程友好显示，拒绝滥用alert界面

  通过为了简单，在返回任何数据的时候，都用alert提示给用户，alert最大的问题在于需要点击一下才能关闭，如果提交成功能自动关闭是不是比这种alert要好很多？

  采用AJAX +JSON 方式提交数据 与传统提交数据 的比较

  

  /* 表单提交 2.0 update 2008-06-14  */
  
  var ajaxSubmitFormData = {
  
   form:false,  //用来保存正在提交的表单
  
   debug:false,
  
   callback:false,
  
   dataType:"json",
  
   onSubmit:function(data){
  
     //正在提交数据提示
  
   },
  
   onResponse:function(response){
  
  	 //当数据返回时触
  
   },
  
   onResponse200:function(data){
  
   	 alert('恭喜你，数据提交成功');
  
   	 window.location.reload(false);
  
   },
  
   onResponse403:function(data){
  
   	  //输入验证码界面
  
   	 var formId=ajaxSubmitFormData.form;
  
   	 if (!$(formId).find(":input[name='verfiyCode']").length){
  
   	  $(formId).append('<input type="text" name="verfiyCode" size="4" /><img src="verifyCode.jsp">');
  
   	 }
  
   },
  
   onResponse500:function(data){ 	    
  
   	  var s="提交错误:/n";
  
   	  //alert(data.length);
  
   	  for(var i=0;i<data.length;i++){
  
   	  	s=s+data[i].id+"|"+data[i].message+"/n";
  
   	  }
  
   	  alert(s);
  
   },
  
   onResponse302:function(data){
  
   	 if (data.length>0){
  
    	 window.location=data[0].message;
  
     }else{
  
     		alert("未定义跳转地址");
  
     }
  
   }
  
  };
  
  $(document).ready(function(){
  
  	$('form.ajaxForm').submit(function() {
  
         //alert($(this).attr("id"));
  
         var formId=$(this).attr("id");
  
         submitAjaxFormNow("#"+formId);
  
         return false; // <-- important!
  
      });
  
      $(".ajaxSubmitButton").click(function(){
  
      	 var formId=$(this).attr("formId");
  
      	 //alert($(this).attr("formId"));
  
      	 submitAjaxFormNow("#"+formId);
  
      }); 	
  
  }); 
  
  function initSubmitAjax(formId,returnFunc){
  
    var options= {             
  
    beforeSubmit:  function(formData, jqForm, options) {  
  
    	if (ajaxSubmitFormData.debug){
  
    	 var queryString = $.param(formData);    
  
       alert('正在提交的数据:/n' + queryString); 
  
      }
  
  	if ($.isFunction(ajaxSubmitFormData.onSubmit)) {
  
    		     ajaxSubmitFormData.onSubmit(formData);
  
       }		  
  
      return true; 
  
    },   
  
    success:function (responseText, statusText)  { 
  
      try{ 
  
        if (ajaxSubmitFormData.debug){
  
    	    alert('status: ' + statusText + '/nresponseText:/n' + responseText); 
  
         }
  
  	   if ($.isFunction(ajaxSubmitFormData.onResponse)) {
  
      	  ajaxSubmitFormData.onResponse(responseText);
  
         }
  
         ajaxSubmitFormData.form     =false;
  
         ajaxSubmitFormData.callback =false;  
  
        //-------- TODO 改成触发事件方式
  
         responseText=responseText.replace(//r/n/g,"");
  
         //trim space
  
        responseText=responseText.replace(/^/s*|/s*$/g, "");
  
     
  
      	var response = eval(responseText)[0]; //转换成json格式    	 
  
      	if (response.code == "200" ){    	
  
      		if ($.isFunction(returnFunc)) {
  
      			ajaxSubmitFormData.callback=returnFunc;
  
      			returnFunc(response.messages);
  
      		}else{
  
      			if ($.isFunction(ajaxSubmitFormData.onResponse200)) {
  
    		     ajaxSubmitFormData.onResponse200(response.messages);
  
            }
  
      		}
  
          //$(formId).triggerHandler("ajax_response_200",response.messages); 
  
        }  
  
        if (response.code == "403" ){
  
        	//保存当前
  
          ajaxSubmitFormData.form       = formId;
  
          ajaxSubmitFormData.callback   = returnFunc;
  
          
  
        	if ($.isFunction(ajaxSubmitFormData.onResponse403)) {
  
    		     ajaxSubmitFormData.onResponse403(response.messages);
  
          }
  
        	//$(formId).triggerHandler("ajax_response_403",response.messages); 
  
        }
  
        if (response.code == "302" ){
  
        	if ($.isFunction(ajaxSubmitFormData.onResponse302)) {
  
    		     ajaxSubmitFormData.onResponse302(response.messages);
  
          }
  
        	//$(formId).triggerHandler("ajax_response_302",response.messages);
  
        }
  
        if (response.code == "500" ){ 	 
  
        	if ($.isFunction(ajaxSubmitFormData.onResponse500)) {
  
    		     ajaxSubmitFormData.onResponse500(response.messages);
  
          }      
  
          //$(formId).triggerHandler("ajax_response_500",response.messages); 
  
        }       
  
      }catch(e){
  
      	alert("服务器返回的数据格式无效:/n"+responseText+"/nError:"+e.message);
  
      }
  
    },
  
    clearForm:true,
  
    resetForm:true,
  
    timeout:60000, 
  
    type:"POST"
  
   }; 
  
   $(formId).ajaxError(function(event, request, settings){
  
      alert("处理请求发生错误:/n"+settings.url+"/n请重新刷新页面或稍后再试");
  
  	  $.unblockUI(); 
  
   });
  
   return options;
  
  }
  
  function submitAjaxFormNow(formId,returnFunc){
  
   if ($(formId))
  
   	 $(formId).ajaxSubmit(initSubmitAjax(formId,returnFunc)); 
  
  }
  
  function submitAjaxForm(formId,returnFunc){ 
  
   if ($(formId))
  
   	 $(formId).ajaxSubmit(initSubmitAjax(formId,returnFunc)); 
  
  }

  预览

• 

  

   演示和源码下载