こんにちは!りょた(@Ryo54388667)といいます(^o^)
現在、都内のIT企業で駆け出しフロントエンドエンジニアとして働いている僕が、1週間の学びや気づきをつらつらと書いていきます。
1 Ajaxの処理
"use strict"
$(function(){
$("#get_address_btn").on("click", function(){
$.ajax({//リクエストデータ
url: "http://zipcoda.net/api",
dataType: "jsonp",
data: {
zipcode: $("#zipcode").val()
},
async: true
}).done(function(data){//レスポンスデータ
console.dir(JSON.stringify(data));
$("#address").val(data.items[0].address);//データ取得が成功した際の処理
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
alert("正しい結果が得られませんでした。”);//不成功の処理
console.log("XMLHttpRequest : " + XMLHttpRequest);
console.log("textStatus :" + textStatus);
console.log("errorThrown :" + errorThrown);
});
});
});
2 データの流れの把握
今週はWeb APIについて学習をしました。
Ajaxのコードを書く際には、データの流れを理解することが必須ですね!!
「data」が何度も出てきますが、「何のデータか(型やコンテンツ)」「どこからどこへのデータか」がわからないと、以降のコードが書けないと思います。
その都度、コンソールを出すなどしてデバッグしながら、開発を進めていかなければ!
また、今週は何度かコードレビューをしてもらいました!
コードレビューは非常に学びになるなと感じました。
違和感があるけども、言葉にできない、ということがよくあります。
その部分を言語化していただき、不明瞭な部分が明確になりました。アドバイスをもとに修正をしていきます!!(^^)