登录POST请求到REST API无效

Question

我正在从客户端向API端点发出发布请求。 成功登录后，API将返回JWT令牌。

在Postman上发送请求时，API可以正常工作，如下图所示：

但是，当我尝试使用AJAX请求从客户端发出此请求以将JWT保存在客户端的本地存储中时，该请求甚至没有出现在日志中。 因此，我认为我的AJAX调用有问题。

这是客户端代码：

<script type="text/javascript">
        $('#button1').click(function(e){
            e.preventDefault();
            $.ajax({
                type: 'POST',
                data: {email: "test1@reg.ru", password: "123"},
                contentType: "application/x-www-form-urlencoded",
                url: 'http://localhost:3000/api/login',
                success : function(data){
                    localStorage.setItem('token', data.token);
                    alert('ok');
                },
                error: function(result) {
                    alert('error');
                }
            });
        });

</script>

<button id="button1">Test API login</button>

我究竟做错了什么？

Answer 1

选择器不正确。 将$('button1').click更改$('button1').click $('#button1').click

Answer 2

尝试在ajax请求中添加dataType: json属性，可能返回值的模式不正确，因此将执行错误回调。

Answer 3

@charlietfl正确指出“ javascript运行时该按钮不存在”。

因此，当我将代码更改为：

<script type="text/javascript">
    $(document).ready(function() {
        $('#button1').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                data: {
                    email: $('#inputEmail').val(),
                    password: $('#inputPassword').val()
                },
                url: 'http://localhost:3000/api/login',
                success: function (result) {
                    alert("success");
                },
                error: function (result) {
                    alert("error");
                }
            });
        });
    });

</script>

它开始工作。

谢谢大家的帮助！