この間、zipCloudのAPIを試して
※ZipCloudの使用上の注意点も記載している
結局APEXで対象した
しかし、VF側でやろうとしていたので、
その時にあっていた問題に対して、自分のものを
共有したいと思います
欲しけりゃくれてやる・・・。
探せ!
この世の全てをそこに置いてきた〜笑
目次
まずは$.Ajax例
$.ajax({ type: 'GET', // GET or POST url: 'http://zipcloud.ibsnet.co.jp/api/search?callback=?', // 取得するファイルpath OR APIをコールURL data:{zipcode : "1000005"} dataType: "json", //jsonは同じドメイン内のコール、jsonpはクロスドメインの場合に使う、ほかもあるtext,html async:true, // 記述任意。デフォルトは非同期通信 = true。同期通信ならfalseにする success:function(data){ //取得成功のとき console.log(data); }, error:function(){ //取得失敗のとき console.log('取得失敗'); } });
$.getJSON
$.getJSONはAjaxの簡単化バージョンの感じ、やることは一緒
使用方法:$.getJSON( '読み込むURL','サーバーへ送るデータ','callback関数');
$.getJSON( 'http://zipcloud.ibsnet.co.jp/api/search?callback=?', //url { zipcode : "1000005"}, // サーバーへ送るデータ function(){ // 処理 } ); //callback関数
Ajaxのcallback関数について
下記のサンプルコードを見てもらえば、なんとかわかるでしょう callback=jsonData
jsonDataって関数を定義し、callbackパラメータに設定した名前の関数をコールするには使う
//JSの一部抜粋 document.addEventListener("DOMContentLoaded", function () { const btn = document.getElementById('btn'); btn.addEventListener('click', function() { const postalcode = document.getElementById('postalcode'); const script = document.createElement('script'); console.log('postalcode:' + postalcode.value); script.src = "http://zipcloud.ibsnet.co.jp/api/search?zipcode="; script.src += postalcode.value + "&callback=jsonData"; document.body.appendChild(script); document.body.removeChild(script); }); }); // APIコールして、callbackパラメータに設定した名前が下記の関数を呼ぶってこと function jsonData(data) { if (data.results) { //ここからは住所の自動設定が、一抜粋となり、アルゴリズム的にAPIコールした結果を住所に自動設定だけ const pref = document.getElementById('pref'); const city = document.getElementById('city'); const address = document.getElementById('street'); console.log('件数:' + data.results.length); pref.value = data.results[0].address1; city.value = data.results[0].address2; address.value = data.results[0].address3; } }