改善Form提交數據的UI 交互設計

　　數據一次校驗
    完整的數據校驗需要前台頁面（JS）和後台程序分別做校驗雖然有Commonsvalidate 框架可以使用但本質上還是分為這麼次校驗 如果校驗出錯或者程序出錯都是後台采用redirect的方式返回到前台雖然采用了struts之類框架的都是forward到前台如果要是做復雜和耗時的校驗（比如要進行數據庫校驗）頁面會長時間停留在後台頁面不是很友好和方便

　　驗證信息友好化讓驗證碼躲起來
    為了防止機器提交都會采用驗證碼機制對於正常操作的用戶每次都要輸入驗證碼顯然不夠不友好的如果提交的時候能夠做判斷如果是正常提交就不需要驗證碼如果是被認定為機器提交諸如連續提交等行為則提示需要輸入驗證碼才能提交數據這樣顯然就進了一步

　　提交過程友好顯示拒絕濫用alert界面
    通過為了簡單在返回任何數據的時候都用alert提示給用戶alert最大的問題在於需要點擊一下才能關閉如果提交成功能自動關閉是不是比這種alert要好很多？

　　采用AJAX +JSON 方式提交數據 與傳統提交數據 的比較
 

　　

　　/* 表單提交 update   */

　　var ajaxSubmitFormData = {

　　form:false  //用來保存正在提交的表單

　　debug:false

　　callback:false

　　dataType:json

　　onSubmit:function(data){

　　//正在提交數據提示

　　}

　　onResponse:function(response){

　　//當數據返回時觸

　　}

　　onResponse:function(data){

　　alert(恭喜你數據提交成功);

　　windowlocationreload(false);

　　}

　　onResponse:function(data){

　　//輸入驗證碼界面

　　var formId=ajaxSubmitFormDataform;

　　if (!$(formId)find(:input[name=verfiyCode])length){

　　$(formId)append(<input type=text name=verfiyCode size= /><img src=verifyCodejsp>);

　　}

　　}

　　onResponse:function(data){

　　var s=提交錯誤:\n;

　　//alert(datalength);

　　for(var i=;i<datalength;i++){

　　s=s+data[i]id+|+data[ssage+\n;

　　}

　　alert(s);

　　}

　　onResponse:function(data){

　　if (datalength>){

　　windowlocation=data[ssage;

　　}else{

　　alert(未定義跳轉地址);

　　}

　　}

　　};

　　$(document)ready(function(){

　　$(formajaxForm)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(formIdreturnFunc){

　　var options= {

　　beforeSubmit:  function(formData jqForm options) {

　　if (ajaxSubmitFormDatadebug){

　　var queryString = $param(formData);

　　alert(正在提交的數據:\n + queryString);

　　}

　　if ($isFunction(ajaxSubmitFormDataonSubmit)) {

　　ajaxSubmitFormDataonSubmit(formData);

　　}

　　return true;

　　}

　　success:function (responseText statusText)  {

　　try{

　　if (ajaxSubmitFormDatadebug){

　　alert(status: + statusText + \nresponseText:\n + responseText);

　　}

　　if ($isFunction(ajaxSubmitFormDataonResponse)) {

　　ajaxSubmitFormDataonResponse(responseText);

　　}

　　ajaxSubmitFormDataform     =false;

　　ajaxSubmitFormDatacallback =false;

　　// TODO 改成觸發事件方式

　　responseText=responseTextreplace(/\r\n/g);

　　//trim space

　　responseText=responseTextreplace(/^\s*|\s*$/g );

　　var response = eval(responseText)[]; //轉換成json格式

　　if (de == ){

　　if ($isFunction(returnFunc)) {

　　ajaxSubmitFormDatacallback=returnFunc;

　　returnFunc(ssages);

　　}else{

　　if ($isFunction(ajaxSubmitFormDataonResponse)) {

　　ajaxSubmitFormDataonResponse(ssages);

　　}

　　}

　　//$(formId)triggerHandler(ajax_response_ssages);

　　}

　　if (de == ){

　　//保存當前

　　ajaxSubmitFormDataform       = formId;

　　ajaxSubmitFormDatacallback   = returnFunc;

　　if ($isFunction(ajaxSubmitFormDataonResponse)) {

　　ajaxSubmitFormDataonResponse(ssages);

　　}

　　//$(formId)triggerHandler(ajax_response_ssages);

　　}

　　if (de == ){

　　if ($isFunction(ajaxSubmitFormDataonResponse)) {

　　ajaxSubmitFormDataonResponse(ssages);

　　}

　　//$(formId)triggerHandler(ajax_response_ssages);

　　}

　　if (de == ){

　　if ($isFunction(ajaxSubmitFormDataonResponse)) {

　　ajaxSubmitFormDataonResponse(ssages);

　　}

　　//$(formId)triggerHandler(ajax_response_ssages);

　　}

　　}catch(e){

　　alert(服務器返回的數據格式無效:\n+responseText+\nError:+ssage);

　　}

　　}

　　clearForm:true

　　resetForm:true

　　timeout:

　　type:POST

　　};

　　$(formId)ajaxError(function(event request settings){

　　alert(處理請求發生錯誤:\n+settingsurl+\n請重新刷新頁面或稍後再試);

　　$unblockUI();

　　});

　　return options;

　　}

　　function submitAjaxFormNow(formIdreturnFunc){

　　if ($(formId))

　　$(formId)ajaxSubmit(initSubmitAjax(formIdreturnFunc));

　　}

　　function submitAjaxForm(formIdreturnFunc){

　　if ($(formId))

　　$(formId)ajaxSubmit(initSubmitAjax(formIdreturnFunc));

　　}

　　預覽

　　

From:http://tw.wingwit.com/Article/program/Java/hx/201311/27021.html