为什么这个 AJAX 请求失败

Question

这是我第一次尝试实现 AJAX，但我一直无法弄清楚它失败的原因。抱歉，对于经验丰富的 AJAX 用户来说，这可能很容易。如果您能看一下，我将不胜感激。

JQuery 文件：

//declare variables
var friendSearch;
var csrfHeader = "[[${_csrf.headerName}]]";
var csrfToken = "[[${_csrf.token}]]";

$(document).ready(function(){
    //give variables values
    friendSearch = $("#friendSearchBox");
    
    //call functions when
    $(friendSearch).on('input', function(){
        updateFriendsDisplay();
    })
});

//functions
function updateFriendsDisplay(){
    var jsonData = {searchString: friendSearch.val()}
    
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/friends/search',
        beforeSend: function(xhr){
            xhr.setRequestHeader(csrfHeader, csrfToken);
        },
        data: JSON.stringify(jsonData),
        contentType: 'application/json'
    }).done(function(data){
        alert(data);
    }).fail(function(){
        alert("failed");
    });
}

控制器：

@ResponseBody
@PostMapping("/search")
public List<UserAccount> getFriendsBySearch(@RequestParam("searchString") String text){
    List<UserAccount> accountsList = uRepo.findByUserNamePortion(text);
    return accountsList;
}