• DWZ使用中遇到的坑


    DWZ官方文档中关于文件上传表单的提交:

    因为Ajax不支持enctype="multipart/form-data" 所以用隐藏iframe来处理无刷新表单提交. 

    <form method="post" action="url" class="pageForm required-validate" enctype="multipart/form-data"
    onsubmit="return iframeCallback(this, [navTabAjaxDone/dialogAjaxDone]);">

    服务器端响应
    DWZ-v1.2版本开始服务器返回和validateCallback格式保持一致:

    {
        "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标签扩展方式示例:

    <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]
    rel="dlg_page1" title="[自定义标题]" width="800" height="480">打开窗口一</a>

    关闭窗口:
    在弹出窗口页面内放置<button class="close" value="关闭"></button>即可。

    JS调用方法示例:

    $.pdialog.open(url, dlgId, title);
    或
    $.pdialog.open(url, dlgId, title, options); 
    

    也就是说要想在页面打开一个弹窗,就必须要加载一个页面,指定一个地址,不然的话就给你报错。。。为啥不能展示本地数据呢。。。好蛋疼的设计。

    为了展示数据,于是乎在分析完文件数据后将结果存到了memcache中,然后返回一个Key放到了返回json中,好在可以自定义回调函数,将key放到一个连接中通过jQ模拟提交,通过另一个页面展示出来。擦,好纠结的业务逻辑。。。泪奔了。。。

    自定义的回调函数:

        // 弹出被覆盖的数据
        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);
            }
        }
    

    表单事件:

    onsubmit="return iframeCallback(this, customAjaxDone);"
    
  • 相关阅读:
    信号量整理
    Linux下串口配置初步探寻
    Vmware启动ubuntu 出现错误。
    软件工程结课作业
    第四次博客作业-结对项目
    20194731 软件工程第三次作业——博文软件质量保障初探
    20194731 第一次作业-博客初体验
    20194731 自动生成四则运算题第一版报告
    误删除 mySQL 用户解决办法
    mySQL的安装过程---二进制和源码安装
  • 原文地址:https://www.cnblogs.com/zxlovenet/p/4130493.html
Copyright © 2020-2023  润新知