DWZ(JUI) 教程普通表单提交-白红宇

原文:

一类是普通的表单提交，另一类就是列表页面的表单提交，主要是用来查询搜索列表使用的。今天我就简单介绍一下前者。

这是官网上的普通列表页面，


            
                 
                      
                           
          
           必填：
          
                  
                                
                                 
           class="required"                  
          
              
         
              
                           
          
           必填+邮箱：
          
                  
                                
                                 
           class="required email"                  
          
              
         
              
                           
          
           电话：
          
                  
                                
                                 
           class="phone"

View Code

这是个是部分的源代码

只需要在此Form 安常规方式写表单就可以了，和常规的开发时没有区别的

如果是在 navTab中提交指定 οnsubmit="return validateCallback(this，navTabAjaxDone)"

如果是在dialog中提交指定 οnsubmit="return validateCallback(this，dialogAjaxDone)"

关于回调函数看我的相关博客就可以了。

开发起来和常规的页面提交是没有太大区别的。

我简单介绍一下提交的原理

dwz都是采用的 Ajax方式提交，看我写的代码简单注释就很容易理解了

/**  * 普通ajax表单提交  * @param {Object} form  * @param {Object} callback  */  function validateCallback(form, callback) {      var $form = $(form);          //验证表单如果有非法字段 返回      if (!$form.valid()) {          return false;      }          //Ajax向后台提交数据      $.ajax({          type: form.method || 'POST',          url:$form.attr("action"),          //获取表单的内容数据                  data:$form.serializeArray(),          dataType:"json",          cache: false,          //执行回调函数                  success: callback || DWZ.ajaxDone,          error: DWZ.ajaxError      });          //保证不会通过普通表单提交          return false;  }

View Code