首页 文章

Html Ajax按钮没有做任何事情

提问于
浏览 次
0

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

按下按钮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>
javascript html ajax

1 回答

  • 0

    这里有一些错误：

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

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

    回复于

相关问题