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

 /* 表单提交 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));

    }