Creé una función que usa getJSON para recuperar un conjunto de datos que se encuentra en un sitio web de API de usuarios registrados de Github
<!DOCTYPE html> <!----> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ var user = $('#search').val(); $.getJSON("https://api.github.com/users/" + user) .done(function(data) { var br = "<br>"; var p = $("<p id='users'></p>"); var name = "Username: "+ user.login + br; var pic = "Avatar Picture:" + br + "<img src='"+user.avatar_url+"'/>" +br; var homeURl = "Homepage URL: "+"<a href='"+user.html_url+"'>"+user.html_url+"</a>" +br; var location = "Location: "+"Null" +br; var admin = "Admin: "+user.site_admin; p.append("<p>"+ name + pic + homeURl + location + admin +"</p>"); $("#results").empty().append(p); }) .fail(function(jqXHR) { console.log("Error: " + jqXHR.status); }) .always(function() { console.log("Random Users Request finished"); }); }); </script> </head> <body> <input id="search" type = "text"> <button>Search</button> <div id="results"></div> </body> </html>Como puede ver, comencé a modificarlo para que, en lugar de mostrar todos los usuarios, solo muestre el usuario que se ha buscado.
var user = $('#search').val(); $.getJSON("https://api.github.com/users/" + user)Este fragmento de código toma el nombre de usuario ingresado en el área de texto y lo pasa al método getJSON en la URL. Una URL de ejemplo es "https://api.github.com/users/mojombo", por lo tanto, si el usuario ingresa "mojombo", aparecerá su perfil.
A esta función se accede a través de un botón
<input id="search" type = "text"> <button>Search</button>Sin embargo, cuando busca el usuario de ejemplo, de hecho, cualquier usuario no muestra datos y permanece una pantalla en blanco.
No ha conectado su función al botón.
Tal como está, se ejecuta antes de que el usuario haya escrito algo en el campo de búsqueda (solicitando así "https://api.github.com/users/" porque user en ese momento es una cadena vacía), y no reaccionará en todo a un clic de botón.
en lugar de solo
$(function(){ /* code */ });hacer
$(function(){ $('button').on('click', function(){ /* code that runs when button is clicked */ }) });