Question

我有一个使用jQuery的帖子（当启用了javascript时）的prog-enhanced表单。

当禁用javascript时，一切正常。

<form class="clearfix" action="https://examples.com/api/rest/members/memberidnotshownforsecurity/examples/?on_success=https://examples.com/account/examples?alerts=inserted&amp;on_failure=https://examples.com/error" method="POST" onsubmit="return false;">
    <input id="url" type="text" name="example_url" placeholder="paste a link to example it"><br>
    <button id="insertExample" type="button">create</button>
</form>

单击#insertExample按钮时，jQuery会处理请求。

<script type="text/javascript">
    $(document).ready(function() {
        var insertExampleMutex = false;
        $("#insertExample").on('click', null, function(event) {
            if ( insertExampleMutex == false ) {
                insertExampleMutex = true;
                var reference = $(this);
                var progsubmit = reference;
                var progform = progsubmit.parents('form');
                var progmethod = progform.attr('method');
                var progaction = progform.attr('action').substring( 0, progform.attr('action').indexOf('?') );
                var progdata = progform.serialize();
                var inventory = reference.parents('#core').find('#inventory');
                progsubmit.html('loading...');
                $.ajax({
                    type: progmethod,
                    url: progaction,
                    data: progdata,
                    dataType: 'json'
                }).done(function(data) {
                    if ( data.status == '1' ) {
                        inventory.prepend('<div style="cursor: pointer;" id="selectExample" href="' + "https://examples.com" + '/api/rest/members/' + data['data']['member_examples']['member_id'] + '/examples/' + data['data']['member_examples']['example_id'] + '" class="alert bgsuccess"><center><p class="psmall">A new example was created. Click to here display.</p></center></div>');
                    } else {
                        inventory.prepend('<div style="cursor: pointer;" onclick="window.location.reload();" class="alert bgfailure"><center><p class="psmall">An error occurred.</p></center></div>');
                    }
                }).fail(function() {
                    inventory.prepend('<div style="cursor: pointer;" onclick="window.location.reload();" class="alert bgfailure"><center><p class="psmall">An error occurred.</p></center></div>');
                }).always(function() {
                    progform[0].reset();
                    progsubmit.html('create');
                    inventory.children('p').remove();
                    insertExampleMutex = false;
                });
            }
        });
    });
</script>

问题是.failure（）请求处理程序被触发...即使帖子成功。第二个问题是它不仅成功一次，而且是两次成功。

在数据库中创建了两个具有相同数据的条目，当然除了id。

我搜索了一下，但没有找到结论。

我已经在使用忽略多个请求的互斥变量。
浏览器未提交表单和javascript。两者都来自ajax调用（由于互斥变量似乎是不可能的）
我读到Ajax可能会获得301，这会导致它再次发布到重定向的URL，但情况似乎并非如此。

Answer 1

根据我的经验，如果处理来自服务器的成功响应的javascript失败，则会触发失败处理程序。换句话说，服务器可以成功，但如果客户端无法正确处理错误事件，则会触发错误事件。您可以尝试使用chrome或firebug或其他东西来调试触发响应的javascript。

当$（document）.ready函数多次触发时，我遇到了双击问题。例如，如果您发布的脚本块位于某个包含多次的HTML中，则会导致您的代码连接多次。

同样，你可以在document.ready函数中添加一个断点来查看发生了什么。

调用jQuery Ajax失败处理程序，但表单数据发布两次，成功

1 个答案: