Html Ajax按钮没有做任何事情

Question

我确定这是显而易见的但我无法弄明白

按下按钮retrieveScoreButton我的按钮根本没有做任何事情

任何帮助是值得赞赏的，我试图将数据附加到表但不能让它注册点击按钮，所以我不能测试功能showsccore

<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
});

（为了说明不同之处，将当前成功处理程序与当前错误处理程序进行比较。其中一个用括号调用函数，另一个不调用。你不想立即调用处理函数，你想把它设置为如果/何时发生该事件，则稍后调用的处理程序。）