0

我有一个使用 jQuery 发布（启用 javascript 时）的 prog 增强表单。

当 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 调用（这似乎是不可能的，因为 mutex 变量）

  • 我读到 Ajax 可能会收到 301，这会导致它再次发布到重定向的 url，但情况似乎并非如此。

4

1 回答 1

1

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

当 $(document).ready 函数多次触发时，我遇到了双重打击问题。例如，如果您发布的脚本块在某些 HTML 中包含多次，这将导致您的代码被多次连接。

同样，您可以在 document.ready 函数中设置断点以查看发生了什么。

于 2013-04-09T02:39:08.190 回答