ajaxの書き方--->
$.ajax({
url: 'http://',
dataType: 'json',
})
.done(function(data){
//何かしらの処理;
})
.fail(function(data){
//何かしらの処理;
});
↑解説
url フルパスで書く。URLまたは実行ファイル。以下カンマで区切る。
dataType データタイプ。受け取るデータの形式。
jsonだったりtextだったりxmlだったり。
ここのかっこを閉じた後はメソッドチェーンなのでドットでつなぐ。
done doneは通信がうまくいった後に何をやるか
fail 通信が失敗したあとに何をやるか。パラメータ()の中のdataは書かなくてもいい
jsonとjsonp
同一ドメイン間であればjsonでもセキュリティ上いい。
異なるドメイン間では（クロスドメインという）、jsonpを使おうというルールがあるらしい。
サーバーにまた情報を渡したり受け取ったりは、
SQLが必要になってくるらしい
問い合わせ言語らしい。
習得の必要があるらしい。
>SQL(エスキューエル)とは、リレーショナルデータベースに蓄積したデータを操作したり定義するためのプログラム言語です。
SQLを覚えると、1万件、10万件、100万件の大量データが登録されたデータを効率的に取得・更新・削除・追加することができます。
そしてSQLは国際標準化されているので、MySQLやOracleなどのデータベースが変わったとしても、同じSQLで操作することが可能です。
そのため、1度習得してしまえば他のどのプログラミング言語でも組み合わせて利用することができます。
関係ないけどこの辺も読んでおく
Webアプリ開発とは？入門者がゼロから開発するための知識と学習手順まとめ
test1.jsを書いていきましょう
構文としてはこうなる（インデックス無視版）
$.ajax({}).done(function(data){}).fail(function(data){});
通信し、メソッドチェーンで「成功したとき」、「失敗したとき」という記述
インデックスをつけるとこうなる
//非同期通信開始
$.ajax({
})
.done(function(data){
})
.fail(function(data){
});
http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060
を組み込んでいく
〒7830060は実際入れちゃうとそれしかでないので
その部分はval()をgetterとして利用
ここまで
--->test1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>API</title>
<link rel="stylesheet" href="test1.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h3>住所検索</h3>
<div>
<p>
<label>
郵便番号 <input id="zipcode" type="text size="10" maxlength="8">
</label>
<button id="btn">検索</button>
</p>
<p>
<label>
都道府県 <input id="prefecture" type="text" size="10">
</label>
</p>
<p>
<label>
市区町村 <input id="city" type="text" size="10">
</label>
</p>
<p>
<label>
住所 <input id="address" type="text" size="10">
</label>
</p>
<p>
<input type="radio" name="r1" id="r1"><label for="r1">ラジオボタン1</label></input>
<label><input type="radio" name="r1" id="r2">ラジオボタン2</input></label>
<label><input type="radio" name="r1" id="r3">ラジオボタン3</input></label>
</p>
</div>
<script src="test1.js"></script>
</body>
</html>
--->test1.js
$(function(){
console.log('hogehoge');
$('#btn').on('click',function(){
//非同期通信開始
$.ajax({
url: 'http://zipcloud.ibsnet.co.jp/api/search?zipcode='+ $('#zipcode').val(),
dataType: 'jsonp', //ここの「,」はあって大丈夫だしあった方がいいらしい
})
.done(function(data){
//通信成功
console.log(data);
})
.fail(function(data){
//通信失敗
console.log('通信失敗したっぽい');
});
});
});
赤文字部分：
配列だと、こういうおしりに「,」をつけっぱなしだと「次あるんじゃない？ 次はnullなのかな」になってしまうので、こういう書き方はできないが、
これはオブジェクトなので、
おしりに「,」うちっぱなしで大丈夫とのこと。
むしろこうしておくと拡張性が高いらしい。
resultsを展開するとちゃんとデータがきていることが分かる
consoleに出てきた上のうにゃうにゃしたcookieがなんちゃらは気にしなくていいらしい。
