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

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

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

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

[html] view plain copy

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

这是个是部分的源代码

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

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

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

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

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

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

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

[javascript] view plain copy

1. /**
2. *普通ajax表单提交
3. *@param{Object}form
4. *@param{Object}callback
5. */
6. functionvalidateCallback(form,callback){
7. var$form=$(form);
8. //验证表单如果有非法字段返回
9. if(!$form.valid()){
10. returnfalse;
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. returnfalse;
26. }

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