возвращение 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.для этого либо включите async = fasle в вызов ajax.или измените 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() не возвращает значение, независимо от того, что вы получаете с get(). Выполнение checkDoubleSubmit() заканчивается до того, как вы получите данные AJAX через get(), поскольку это асинхронный вызов. Вы не добьетесь успеха с этим.

Один из способов сделать это - вернуть ВСЕГДА из checkDoubleSubmit(), а затем, в функции обратного вызова из get(), если данные в порядке и вы хотите, чтобы отправка прошла, снова отправьте форму с помощью JavaScript , на этот раз без каких-либо проверок, чтобы он отправил сразу.

Answer 3

Вы никогда не возвращаете истинное / ложное значение из вашей функции checkDoubleSubmit.Ваши операторы 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 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>