Javascript 成功后的ajax自定义对话框

我编写了一个自定义对话框/模式框，如下所示：

<div id="somedialog" class="dialog">
    <div class="dialog__overlay"></div>
    <div class="dialog__content">
        <h2><strong>Howdy</strong>, I'm a dialog box</h2><
        div><button class="action" data-dialog-close>Close</button></div>
    </div>
</div>

<script src="js/classie.js"></script>
<script src="js/dialogFx.js"></script>
<script>
    (function() {

        var dlgtrigger = document.querySelector( '[data-dialog]' ),
            somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
            dlg = new DialogFx( somedialog );

        dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

    })();
</script>

---

从第一个代码块开始，使用以下行调用对话框：

dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

…因此，只要在从AJAX调用获得成功/完成响应时调用它即可。我对您的脚本做了一些更改：

• 使用

  jqXHR

  延迟对象

  .done（）

  而不是

  .success（）

  。后者已被弃用，取而代之的是

  .done（）

  ，而

  .error（）

  也是如此，之后是

  .fail（）

• 为了保持一致性，将本机JS代码转换为对话框变量声明的jQuery——尽管使用本机JS完全可以，但这里缺乏一致性
• 通过注释删除窗口重定向，因为它无法显示对话框，不是吗

以下是修订后的JS：

$(document).on("click", "#submit", function(){
    var $self = $(this);
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var request = $.ajax({
        url: "login.php",
        type: "POST",
        data: { username: username, password: password},
        beforeSend: function(){
            $self.html("Loading please wait...");
        }
    });

    // When successful
    // Use deferred object .done()
    request.done(function(data) {
        if(data=='user') {
            window.location.href = "filter.php";
        } else if(data=='company') {
            window.location.href = "filter.php";
        } else {
            alert("Wrong Username or Password!");

            // Call dialogue box
            var dlgtrigger = $('[data-dialog]'),
                somedialog = $(dlgtrigger).attr('data-dialog'),
                dlg = new DialogFx( somedialog );

            dlg.toggle.bind(dlg);

            //window.location.href = "indexwithlogin.php";
        }
    });
});

使用

dlg.toggle.bind（dlg）（

内部成功函数 而不是

---

dlg.toggle.bind（dlg）

一些问题：（1）您打算接受jQuery作为解决方案吗？如果没有，请移除标签。您的问题中没有jQuery，它正在污染标记的名称空间。（2） AJAX调用的代码在哪里？是的，jquery可能是一个可行的方法solution@isherwoodOP修改了问题并在其中添加了jQuery代码。您可以通过查看修订历史的时间戳来验证这一点。那么，将ajax返回的值实际传递到对话框的文本中怎么样？不幸的是，这段代码不起作用，是一个错误occured@wishfulthinking不知道你的用户名是不是双关语，但我真的一厢情愿地认为，当你没有提供进一步的信息时，我知道你有什么错误。请在浏览器控制台中发布收到的错误消息。这是一个很好的开始。我确实使用了控制台日志，它没有返回任何特定于浏览器的错误，只是没有弹出窗口

$(document).on("click", "#submit", function(){
    var $self = $(this);
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var request = $.ajax({
        url: "login.php",
        type: "POST",
        data: { username: username, password: password},
        beforeSend: function(){
            $self.html("Loading please wait...");
        }
    });

    // When successful
    // Use deferred object .done()
    request.done(function(data) {
        if(data=='user') {
            window.location.href = "filter.php";
        } else if(data=='company') {
            window.location.href = "filter.php";
        } else {
            alert("Wrong Username or Password!");

            // Call dialogue box
            var dlgtrigger = $('[data-dialog]'),
                somedialog = $(dlgtrigger).attr('data-dialog'),
                dlg = new DialogFx( somedialog );

            dlg.toggle.bind(dlg);

            //window.location.href = "indexwithlogin.php";
        }
    });
});