javascript返回jQuery.get（）無效

Question

如果條件為真，我正在嘗試使鏈接正常工作，為此我正在發送jQuery.get()並檢查鏈接是否應跳至下一頁。

我正在使用以下代碼：

<script type="text/javascript">
    var jq = jQuery.noConflict();
    function checkDoubleSubmit() {
        jq(function() {
            jq.get("/checkDoubleSubmit",
                    function(data) {
                        if(data == null) {
                            return true;
                        }
                        else {
                            alert("double submit is not allowed");
                            return false;
                        }
                    }
            );
        });
    }
</script>


<a href="<c:url value="/submit" />" onclick="return checkDoubleSubmit();">check double submit</a>

即使data不為null ，頁面也會跳至下一頁。 有人可以幫助我了解我在做什么錯嗎？

謝謝。

Answer 1

那是因為ajax call是asynchronous 。 它不會等待ajax響應。 為此，在ajax調用中包括async = fasle 。 或更改preventDefault 。

或如下更改代碼

<a href="#" id="mylink" for="<c:url value="/submit" />" onclick="checkDoubleSubmit();">check double submit</a>

<script type="text/javascript">
    var jq = jQuery.noConflict();
    function checkDoubleSubmit() {
        jq(function() {
            jq.get("/checkDoubleSubmit",
                    function(data) {
                        if(data == null) {
                            window.location = jq("a#mylink").attr("for");
                        }
                        else {
                            alert("double submit is not allowed");
                        }
                    }
            );
        });
    }
</script>

Answer 2

您實際上從未從checkDoubleSubmit函數返回任何true / false值。 您的return語句僅返回jq.get使用的匿名函數。

您可以執行以下操作：

<script type="text/javascript">
    var jq = jQuery.noConflict();
    function checkDoubleSubmit() {
        var doubleCheckResult;
        jq(function() {
            jq.get("/checkDoubleSubmit",
                    function(data) {
                        if(data == null) {
                            doubleCheckResult = true;
                        }
                        else {
                            alert("double submit is not allowed");
                            doubleCheckResult = false;
                        }
                    }
            );
        });
        return doubleCheckResult;
    }
</script>

但是，這只會使您入門。 請參閱dku的答案以了解其原因，然后查看如何使jQuery執行同步而不是異步的Ajax請求？ 有關如何實施的詳細信息。

Answer 3

無論使用get()什么， checkDoubleSubmit()都不返回值。 在通過get()獲取AJAX數據之前， checkDoubleSubmit()的執行結束，因為它是異步調用。 這樣處理將不會成功。

一種方法是從checkDoubleSubmit()返回錯誤的ALWAYS，然后在get()的回調函數中，如果數據正常並且您希望提交通過，則這次通過JavaScript再次提交表單沒有任何檢查，以便立即提交。

Answer 4

我使用以下代碼進行工作：

<script type="text/javascript">
    var jq = jQuery.noConflict();
    function checkDoubleSubmit(obj) {
        var checkDoubleSubmitResult;
        jq.ajax({
            url:        "/checkDoubleSubmit",
            success:    function(data) {
                                if(data == null) {
                                    checkDoubleSubmitResult = true;
                                }
                                else {
                                    alert("double submit is not allowed");
                                    checkDoubleSubmitResult = false;
                                }
                            },
            async:      false,
            dataType:   "json"
        });
        return checkDoubleSubmitResult;
    }
</script>
<a href="<c:url value="/submit" />" onclick="return checkDoubleSubmit(this);">check double submit</a>