さっきのコードを見やすくしましょう
ajaxのオブジェクトを追加→
type 送信時の通信タイプ
data 引き渡すデータ
--->test1.js
$(function(){
console.log('hogehoge');
$('#btn').on('click',function(){
//非同期通信開始
$.ajax({
url: 'http://zipcloud.ibsnet.co.jp/api/search',
dataType: 'jsonp',/*受信時のデータ形式。書式のこと*/
type: 'get',/*送信時の通信タイプ getがdefaultなので書かないくてもgetになるが書きましょう*/
data: {'zipcode':$('#zipcode').val()},/*引き渡すデータ。複数のデータを渡すかもしれないのでオブジェクトで渡す*/
})
.done(function(data){
//通信成功
console.log(data);
})
.fail(function(data){
//通信失敗
console.log('通信失敗したっぽい');
});
});
});
受け取ったdataの中身はこれ
{message: null, results: Array(1), status: 200}
message: null
results: Array(1)
0: {address1: "高知県", address2: "南国市", address3: "蛍が丘", kana1: "ｺｳﾁｹﾝ", kana2: "ﾅﾝｺｸｼ", …}
length: 1
__proto__: Array(0)
status: 200
__proto__: Object
{}で囲っているから向こうもオブジェクトでどんと塊を送ってきているのが分かる
data.resultsの中身
0: {address1: "東京都", address2: "千代田区", address3: "千代田", kana1: "ﾄｳｷｮｳﾄ", kana2: "ﾁﾖﾀﾞｸ", …}
length: 1
__proto__: Array(0)
data.results[0]の中身
{address1: "東京都", address2: "千代田区", address3: "千代田", kana1: "ﾄｳｷｮｳﾄ", kana2: "ﾁﾖﾀﾞｸ", …}
ここにいたっても「配列で、かつ、配列の中身がこともあろうにオブジェクト」ということが分かる
var d = data.results[0];/*いったん変数に格納*/
console.log(d.address1);
こうすると「東京都」が取り出せる
これ変数名がdataだからややこしい。hogeなら理解しやすい
→test1.js
$(function(){
console.log('foo');
$('#btn').on('click',function(){
//非同期通信開始
$.ajax({
url: 'http://zipcloud.ibsnet.co.jp/api/search',
dataType: 'jsonp',/*受信時のデータ形式。書式のこと*/
type: 'get',/*送信時の通信タイプ getがdefaultなので書かないくてもgetになるが書きましょう*/
data: {'zipcode':$('#zipcode').val()},/*引き渡すデータ。複数のデータを渡すかもしれないのでオブジェクトで渡す*/
})
.done(function(hoge){
//通信成功
console.log(hoge);
console.log(hoge.results);
console.log(hoge.results[0]);
var d = hoge.results[0];/*いったん変数に格納*/
console.log(d.address1);
})
.fail(function(hoge){
//通信失敗
console.log('通信失敗');
});
});
});
①hogeは変数でしかない
②その中に受け取ったデータのかたまりの大きいのをぶっこんだ
③そのなかにはmessageやらresultsやらstatusやらが入っていて、そういうのはプロパティというらしい。
そのひとつのプロパティを指定したいのでhoge.resultsとする
④resultsの中がまだ配列だ。0番目をください
⑤0番目の中身がこれですよ
{address1: "東京都", address2: "千代田区", address3: "千代田", kana1: "ﾄｳｷｮｳﾄ", kana2: "ﾁﾖﾀﾞｸ", …}
まだ大きいな。変数dにいったん入れますよ。
⑥じゃあその中のaddress1の情報をいただきましょう
という記述になっている。
書き出し時の注意
textでうまくいかないと思ったら、「入力欄」に出力するのはvalなのだそう。
そしてまだid名の#をつけるのを忘れました。
--->test1.js
$(function(){
console.log('foo');
$('#btn').on('click',function(){
//非同期通信開始
$.ajax({
url: 'http://zipcloud.ibsnet.co.jp/api/search',
dataType: 'jsonp',/*受信時のデータ形式。書式のこと*/
type: 'get',/*送信時の通信タイプ getがdefaultなので書かないくてもgetになるが書きましょう*/
data: {'zipcode':$('#zipcode').val()},/*引き渡すデータ。複数のデータを渡すかもしれないのでオブジェクトで渡す*/
})
.done(function(hoge){
//通信成功
//console.log(hoge);
console.log(hoge.results);
//console.log(hoge.results[0]);
var d = hoge.results[0];/*いったん変数に格納*/
//console.log(d.address1);/*東京都を取得*/
$('#prefecture').val(d.address1);/*入力欄に書き出すのはval。idの#を忘れずに*/
$('#city').val(d.address2);
$('#address').val(d.address3);
})
.fail(function(hoge){
//通信失敗
console.log('通信失敗');
});
});
});
なんとかのプロパティを、という記述はドットで区切るらしい
val(d.address2)
『『オブジェクト名.プロパティ』でアクセスできる』
と覚えましょう。
非同期通信ぽくしたかったら、on clickじゃなくてon mouseoutかmouseoverにしたらよろしい。
ボタンの上をカーソル通過しただけで情報が来る。
