DWZ使用中遇到的坑
DWZ官方文档中关于文件上传表单的提交:
因为Ajax不支持enctype="multipart/form-data" 所以用隐藏iframe来处理无刷新表单提交.
1 | < form method="post" action="url" class="pageForm required-validate" enctype="multipart/form-data"<br> onsubmit="return iframeCallback(this, [navTabAjaxDone/dialogAjaxDone]);"> |
服务器端响应
DWZ-v1.2版本开始服务器返回和validateCallback格式保持一致:
1 2 3 4 5 6 7 8 | { "statusCode" : "200" , "message" : "操作成功" , "navTabId" : "" , "rel" : "" , "callbackType" : "closeCurrent" , "forwardUrl" : "" } |
第一个坑是,因为要上传文件,所以表单必须使用隐藏iframe的方式来处理,可是服务端返回的数据必须是JSON格式的,而不能使html,所以处理后的数据就不能展示了,只能说是提示操作状态。
第二个坑是,因为上传文件后在服务端分析数据后需要去展示,所以想着以弹窗的方式去展示,却发现了另外一个坑,事情是这样的:
dialog链接扩展:
<a href=”xxx” target=“dialog” [rel=“dialogId”]>
A所指向页面将会在dialog 弹出层中打开,rel标识此弹出层的ID,rel为可选项。
Html标签扩展方式示例:
1 2 3 | < a href="w_dialog.html" target="dialog" rel="page2">弹出窗口</ a > 或 < a href="demo_page1.html" target="dialog" [max=true, mask=true, maxable=true, minable=true, resizable=true,drawable=true]<br> rel="dlg_page1" title="[自定义标题]" width="800" height="480">打开窗口一</ a > |
关闭窗口:
在弹出窗口页面内放置<button class="close" value="关闭"></button>即可。
JS调用方法示例:
1 2 3 | $.pdialog.open(url, dlgId, title); 或 $.pdialog.open(url, dlgId, title, options); |
也就是说要想在页面打开一个弹窗,就必须要加载一个页面,指定一个地址,不然的话就给你报错。。。为啥不能展示本地数据呢。。。好蛋疼的设计。
为了展示数据,于是乎在分析完文件数据后将结果存到了memcache中,然后返回一个Key放到了返回json中,好在可以自定义回调函数,将key放到一个连接中通过jQ模拟提交,通过另一个页面展示出来。擦,好纠结的业务逻辑。。。泪奔了。。。
自定义的回调函数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 弹出被覆盖的数据 function customAjaxDone(json){ if (json.statusCode == DWZ.statusCode.ok){ if (json.content.toString() == "xxx" ){ DWZ.ajaxDone(json); } else { $( "#xxx" ).attr( "href" , "{{ wrap_url('xxx/show_replace_data?hash=')}}" + json.content); $( "#xxx" ).click(); } } else { DWZ.ajaxDone(json); } } |
表单事件:
1 | onsubmit="return iframeCallback(this, customAjaxDone);" |
作者: 初行
Q Q: 121866673
来源: http://zxlovenet.cnblogs.com
声明: 本文原创发表于博客园,作者为初行本文欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。
消息:此博客已停止更新,想了解最新博客更新请关注我的新博客 Noogel's notes
推荐: 推荐使用为知笔记(WizNote),它是电脑、手机、平板上都能用的云笔记软件,还可以分类管理和共享资料,使用我的邀请码注册:https://note.wiz.cn/i/06102d9e
打赏: 如果您觉得文章对您的工作有帮助,请小额打赏我一些,鼓励我写出更好的文章!
Q Q: 121866673
来源: http://zxlovenet.cnblogs.com
声明: 本文原创发表于博客园,作者为初行本文欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。
消息:此博客已停止更新,想了解最新博客更新请关注我的新博客 Noogel's notes
推荐: 推荐使用为知笔记(WizNote),它是电脑、手机、平板上都能用的云笔记软件,还可以分类管理和共享资料,使用我的邀请码注册:https://note.wiz.cn/i/06102d9e
打赏: 如果您觉得文章对您的工作有帮助,请小额打赏我一些,鼓励我写出更好的文章!

微信打赏

支付宝打赏
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述