DWZ(JUI) 教程 普通表单提交

最近有一些朋友问到 一些常规的表单提交的问题，我在这里就做一些简单的梳理，dwz 这里 表单提交大致可以分为两类

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

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

[html] view plain copy

1. <div class="pageContent">  
2.     <form method="post" action="demo/common/ajaxDone.html" class="pageForm required-validate" onsubmit="return validateCallback(this，navTabAjaxDone)">  
3.         <div class="pageFormContent nowrap" layoutH="97">  
4.             <dl>  
5.                 <dt>必填：</dt>  
6.                 <dd>  
7.                     <input type="text" name="name" maxlength="20" class="required" />  
8.                     <span class="info">class="required"</span>  
9.                 </dd>  
10.             </dl>  
11.             <dl>  
12.                 <dt>必填+邮箱：</dt>  
13.                 <dd>  
14.                     <input type="text" name="email" class="required email" alt="请输入您的电子邮件"/>  
15.                     <span class="info">class="required email"</span>  
16.                 </dd>  
17.             </dl>  
18.             <dl>  
19.                 <dt>电话：</dt>  
20.                 <dd>  
21.                     <input type="text" name="phone" class="phone" alt="请输入您的电话"/>  
22.                     <span class="info">class="phone"</span>  
23.                 </dd>  
24.             </dl>  
25.         </div>  
26.         <div class="formBar">  
27.             <ul>  
28.                 <li><div class="buttonActive"><div class="buttonContent"><button type="submit">提交</button></div></div></li>  
29.                 <li><div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div></li>  
30.             </ul>  
31.         </div>  
32.     </form>  
33. </div>  

这是个是部分的源代码

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

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

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

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

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

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

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

[javascript] view plain copy

1. /** 
2.  * 普通ajax表单提交 
3.  * @param {Object} form 
4.  * @param {Object} callback 
5.  */  
6. function validateCallback(form, callback) {  
7.     var $form = $(form);  
8.         //验证表单如果有非法字段 返回  
9.     if (!$form.valid()) {  
10.         return false;  
11.     }  
12.         //Ajax向后台提交数据  
13.     $.ajax({  
14.         type: form.method || 'POST',  
15.         url:$form.attr("action"),  
16.         //获取表单的内容数据  
17.                 data:$form.serializeArray(),  
18.         dataType:"json",  
19.         cache: false,  
20.         //执行回调函数  
21.                 success: callback || DWZ.ajaxDone,  
22.         error: DWZ.ajaxError  
23.     });  
24.         //保证不会通过普通表单提交  
25.         return false;  
26. }  

希望对大家有帮助  转载请标明出处   http://blog.youkuaiyun.com/jiweigang1/article/details/8851703