Memos About Salesforce

Salesforceにハマってたこと!

API Callback JSONP JSONの違い

この間、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;
            }
        }