jQuery初學基礎常用內容——AJAX(2)
阿新 • • 發佈：2018-11-28
這裡我展示是自學視訊中通過GitHub的api做成的很小的專案，可以搜尋使用者名稱，然後通過GitHub來呼叫相關資料，反饋這個使用者的相關資訊給你。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form id="search"> <input id="username" type="search"> <button type="submit">搜尋使用者</button> </form> <div id="result"></div> <script src="node_modules/jquery/dist/jquery.js"></script> <script src="JS/main.js"></script> </body> </html>
var form = $('#search'); var input=$('#username'); var result=$('#result'); var username;//以上定義變數 form.on('submit',function (e) { //給form新增點選事件，當點選提交表單時 e.preventDefault(); //打斷表單提交，執行以下命令 username = input.val();//將我們再input中輸入的內容給上邊我們定義的變數username $.ajax('https://api.github.com/users/'+username)//使用ajax，輸入url，最後的使用者名稱是更加使用者的輸入來覺定的 .done(function (data) {//done()方法是輸入提交完成之後我們執行的內容 var html =//我們定義一個變數叫html，為什麼在以下程式碼中我的使用者名稱不是data.username，因為github返回給我的內容使用者名稱對應的物件就是login '<div>使用者名稱：'+data.login+'</div>'+ '<div>郵箱：'+(data.email || '無')+'</div>'+ '<div>ID：'+data.id+'</div>'+ '<div>ID：'+data.bio+'</div>' result.html(html);//最後我們使用html()方法，將我們上邊的html變數的內容放入result中 }); })