Question

创建一个jQuery事件处理程序，该处理程序将启动Ajax请求，检索数据并提取所需的信息。我需要根据用户在<div id="results">中输入的用户名来显示用户名和电子邮件。还需要在<div id="results">中说，如果根据输入未找到用户名，则找不到用户。

这是我正在访问https://jsonplaceholder.typicode.com/users/的用户JSON文件

<script>
$(document).ready(function() {
$("#btnSubmit").click(function(){
    var username = $("#user").val();
    $.ajax( {
        url: 'https://jsonplaceholder.typicode.com/users/',
        method: 'GET'
    }).then(function(data) {
        $.get(username);
        $.each(data, function(index, user) {
            if (user['username'] == username) {
                $('#results').text(''+ user.name +' ('+user.email +')');
            } else {
                $('#results').text('Sorry, no user could be found with the username '+ username+ '');
            }


        });

    });
}); 
});
</script>

我能够根据用户名找到用户，但是我不知道下一步要获取用户名和电子邮件。

Answer 1

您不需要$ .get（），而只需使用JS循环。此代码段有效：

$(document).ready(function() {
    $("#btnSubmit").click(function(){
        var username = $("#user").val();
        $.ajax( {
            url: 'https://jsonplaceholder.typicode.com/users/',
            method: 'GET'
        }).success(function(data) {

            // Data is an array, let loop through each, to get object data
            for (var i = 0; i < data.length; i++) {

                // Get object's property values
                var dataUsername = data[i].username;
                var dataUserEmail = data[i].email;

                // Output user data if user is matched
                if(dataUsername.toLowerCase() == username.toLowerCase()){
                    $('#results').text(dataUsername + ' ' + dataUserEmail);
                }
            }
        });
    }); 
});

显示有关JSON用户的信息

1 个答案: