apiを使った非同期通信をやってみました。

また今回も自分用に備忘録。例えば、urlを入れて、実行を押すと、そのurlにいってデータを持ってくるapiを作って、その後リンク先のタイトルを画面に表示する的なそんなものを作ることがあったので、また調べものしないでいいようにメモっておきます。流れも併せてメモしておきます。

1.apiをあらかじめ用意しておく

formからurlをpostへapiへ送信する。すると、そのapiからjsonでレスポンスがやってくるというもの。

受け取ったjsonを元にして、画面にjavascriptで描画するということになる。

ざっくりいくと、以下のような感じ

///結果用の配列
$dataset=array();
if(isset($_POST["url"])&&preg_match("/([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?/",$_POST["url"])){
///urlが正常の時の処理

//取得する
$dom = new DOMDocument;
@$dom->loadHTML(mb_convert_encoding(file_get_contents(trim($url)), "HTML-ENTITIES", "auto"));
$xpath = new DOMXPath($dom);

///og:titleを優先したい
if(
method_exists($xpath->query('//meta[@property="og:title"]')->item(0),"getAttribute")&&
$xpath->query('//meta[@property="og:title"]')->item(0)->getAttribute("content")!=""
){
   ///og:titleがある場合
   $dataset["title"] =trim($xpath->query('//meta[@property="og:title"]')->item(0)->getAttribute("content"));
}else{
   ///ない場合は、titleタグからもってくる
   $dataset["title"] =trim($xpath->query('//title')->item(0)->textContent);
}

///データがあった旨も入れておく
$dataset["result"]='success';

}else{
   ///urlがおかしい場合
   $dataset["result"]='error';
}

//jsonに変換して
$return_json=json_encode($dataset);

//吐き出す
header('Content-type: application/json');
echo $return_json;

※おおまかに。細かい分岐はさておき

2.formから送信してみる

つまり、inputの中にurlを押して、送信ボタンを押してデータを送るんだけど、普通のformだとページ遷移してしまうので、submitを使わず、何かてきとーにbuttonか何かを送信ボタンにして、クリックされたら、inputの中身を取得して送信してくれる流れにしてみる。

ざっくり以下みたいな感じ

<input placeholder="urlを入力してください" id="input_url">
<input type="button" onclick="url_get();" value="取得">

こんな感じのhtmlを用意して、ボタンを押すとurl_getが発動して、idがinput_urlのデータをjavascript側で取得し、1で作ったapiへ送信する

以下、javascript側

///apiへ送信するための関数
function url_post(){
        var rd=new FormData();
        rd.append('url',$("#input_url").val());
        return $.ajax({
        type:'POST',
        url:'◾️１で作ったapiのurl◾️',
        data:rd,
        processData: false,
        contentType:false
        });

}

function url_get(){

        url_post().done(function(result){
         ///resultの中にapiから帰ってきたデータが入ってるので、
　　　　　　//ここであとの処理を入れる
        }).fail(function(result){
            //エラーでた時の処理。console.logでもいれとけ
        });

ざっくりメモということで。

コメント