登錄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>

它開始工作。

謝謝大家的幫助！