Кнопка HTML Ajax ничего не делает

Question

я уверен, что это что-то очевидное, но я не могу понять это

нажатием кнопки retrieveScoreButton моя кнопка просто ничего не делает

любая помощь приветствуется, я пытаюсь добавить данные ктаблицу, но я не могу даже заставить ее зарегистрировать нажатие кнопки, поэтому я не могу проверить функцию showccore

<button id="addScoreButton">Add score</button>
<button id="retrieveScoreButton">Retrieve all scores</button>
<br>

<div id="Scores">
<ul id="scoresList">
</ul>
</div>

<script>
$(document).ready(function () {
    $("#addScoreButton").click(function () {
            $.ajax({
                    type: 'POST',
                    data: $('form').serialize(),
                    url: '/addScore',
                    success: added,
                    error: showError
                }
            );
        }
    );
});



$(document).ready(function () {
    $("#retrieveScoreButton").click(function () {
            console.log(id);
            $.ajax({
                    type: 'GET',
                    dataType: "json",
                    url: "/allScores",
                    success: alert("success"),
                    error: showError
                }
            );
        }
    );
});

function showScores(responseData) {
        $.each(responseData.matches, function (scores) {
                $("#scoresList").append("<li type='square'>" +
                    "Home Team " + matches.Home_Team +
                    "Away Team: " + matches.Away_Team +
                    "Home: " + scores.Home_Score +
                    "Away: " + scores.Away_Score
                );

            }
        );
    }

function showError() {
        alert("failure");
    }


</script>

</body>

</html>

Answer 1

Здесь есть пара неправильных вещей:

console.log(id);
$.ajax({
    type: 'GET',
    dataType: "json",
    url: "/allScores",
    success: alert("success"),
    error: showError
});

Во-первых, вы никогда не определили id.(После некоторых комментариев по этому вопросу выясняется, что консоль браузера говорит вам об этом.) Что вы пытаетесь зарегистрировать?Вы также можете просто полностью удалить эту строку.

Во-вторых, что вы ожидаете здесь ?: success: alert("success") Что здесь произойдет, если alert() выполнит немедленно (до того, как вызов AJAX будет даже отправлен), а затем результат оповещения (то есть undefined) будет вашим обработчиком успеха.Вам нужна функция-обработчик, которая будет вызвана после ответа AJAX, и эта функция может содержать предупреждение.

Примерно так:

$.ajax({
    type: 'GET',
    dataType: "json",
    url: "/allScores",
    success: function() { alert("success"); },
    error: showError
});

(Для иллюстрацииразницу, сравните ваш текущий обработчик успеха с вашим текущим обработчиком ошибок. Один из них вызывает функцию с круглыми скобками, а другой нет. Вы не хотите вызывать функцию-обработчик сразу, вы хотите установить ее как обработчиквызывается позже, если / когда это событие произойдет.)