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

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

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

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

<div class="pageContent"><form method="post" action="demo/common/ajaxDone.html" class="pageForm required-validate" οnsubmit="return validateCallback(this，navTabAjaxDone)"><div class="pageFormContent nowrap" layoutH="97"><dl><dt>必填：</dt><dd><input type="text" name="name" maxlength="20" class="required" /><span class="info">class="required"</span></dd></dl><dl><dt>必填+邮箱：</dt><dd><input type="text" name="email" class="required email" alt="请输入您的电子邮件"/><span class="info">class="required email"</span></dd></dl><dl><dt>电话：</dt><dd><input type="text" name="phone" class="phone" alt="请输入您的电话"/><span class="info">class="phone"</span></dd></dl></div><div class="formBar"><ul><li><div class="buttonActive"><div class="buttonContent"><button type="submit">提交</button></div></div></li><li><div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div></li></ul></div></form>
</div>

这是个是部分的源代码

只需要在此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;
}

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

DWZ(JUI) 教程普通表单提交相关推荐

简单表单提交php教程,php教程之表单提交实例
一个超简单的初学者用的php教程之表单提交实例有需要的朋友参考一下. 下面我们将创建一个复杂的表单,代码如下所示. 实例代码如下: 姓名: 密码: 年龄: 16">小于16 16-30 ...
简单表单提交php教程,php教程之表单提交实例_PHP教程
一个超简单的初学者用的php教程之表单提交实例有需要的朋友参考一下.下面我们将创建一个复杂的表单,代码如下所示. 代码如下复制代码姓名: 密码: 年龄: 16">小于16 16-3 ...
dwz 表单提交 html,dwz 文件上传表单提交分析
众所周知,因为Ajax不支持enctype="multipart/form-data".所以如果想采用无刷新的方式提交文件,Ajax是不行的.采用变通,也是最简单有效的方式是在页面 ...
dwz 表单提交 html,DWZ文件上传表单提交
文件上传表单提交因为Ajax不支持enctype="multipart/form-data" 所以用隐藏iframe来处理无刷新表单提交. 或服务器端响应 DWZ-v1.2版本 ...
DWZ (JUI) 教程 dwz框架刷新dialog解决方案
原文:DWZ (JUI) 教程 dwz框架刷新dialog解决方案在DWZ中进行ajax表单提交后,通过回调函数来返回状态结果,以及返回是否需要刷新父页的navTabId. DWZ给 ...
html页面关闭前提示信息,【转】表单提交及关闭当前页面并刷新数据
在DWZ文档中,对于DWZ框架Ajax无刷新表单提交处理流程描述如下: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数 ...
DWZ (JUI) 教程表单提交重定向问题
DWZ (JUI) 教程表单提交重定向问题最近有朋友问表单提交后navTab重定向的问题,其实非常简单我简单说明一下. dwz 中提供了简单 navTabAjaxDone 回调函数在fo ...
php 表单提交及验证 tp,ThinkPHP表单自动提交验证实例教程
ThinkPHP表单自动提交验证实例教程附加规则配合验证规则使用,包括: function 使用函数验证,前面定义的验证规则是一个函数名 callback 使用方法验证,前面定义的验证规则是一个当 ...
keta-custom DWZ validationEng IE 下表单重复提交BUG原因及修复方法
2019独角兽企业重金招聘Python工程师标准>>> BUG场景 : <form method="post" action="${contex ...

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

DWZ(JUI) 教程普通表单提交相关推荐

最新文章

热门文章

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

DWZ(JUI) 教程 普通表单提交相关推荐

最新文章

热门文章

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

DWZ(JUI) 教程普通表单提交相关推荐