FlaskのAPIサーバから取得した情報をHTML/Javascriptで表示する | www.yoshiislandblog.net

FlaskのAPIサーバから取得した情報をHTML/Javascriptで表示する

flaskでAPIサーバを作成するで作成したAPIサーバからの情報をHTMLページに表示する

実際のツールは以下に
https://www.yoshiislandblog.net/twitter_mecab_api/

最新のコードは以下に
https://github.com/yoshi-island/mecab-twitter-api_client

get-tweets-places.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>

<h1>Twitter IDからよく呟かれている地名を探す</h1>

<p>
<div>
@<input type="text" value="takapon_jp" id="twtid">
</div>
</p>

<p>
<div>
<button type="button" onclick="loadDoc()">Request data</button>
</div>
</p>

<p>
<div>
<li>1位: <label id="first"></label>
<li>2位: <label id="second"></label>
<li>3位: <label id="third"></label>
<li>4位: <label id="fourth"></label>
<li>5位: <label id="fifth"></label>
</div>
</p>

<p>
tweets:<br>
<label id="tweets"></label>
</p>

<script>

function loadDoc() {
  var twtid = document.getElementById("twtid") ;
  var requrl = "https://{SV IP}:3000/getTweetsPlace/@" + twtid.value
  document.getElementById("first").innerHTML = "";
  document.getElementById("second").innerHTML = "";
  document.getElementById("third").innerHTML = "";
  document.getElementById("fourth").innerHTML = "";
  document.getElementById("fifth").innerHTML = "";
  document.getElementById("tweets").innerHTML = "";

  $.ajax({
    url: requrl,
    type: "GET",
    success: function(result){
      console.log(result["data"]["rank"])
      console.log(result["data"]["src_place_twt"])

      if(result["data"]["rank"]["0"]) {
        document.getElementById("first").innerHTML = result["data"]["rank"]["0"]["place"] + " ( " +
          result["data"]["rank"]["0"]["count"] + " )";
      } else {
        document.getElementById("first").innerHTML = "見つかりません";
      }

      if(result["data"]["rank"]["1"]) {
        document.getElementById("second").innerHTML = result["data"]["rank"]["1"]["place"] + " ( " +
          result["data"]["rank"]["1"]["count"] + " )";
      } else {
        document.getElementById("second").innerHTML = "見つかりません";
      }

      if(result["data"]["rank"]["2"]) {
        document.getElementById("third").innerHTML = result["data"]["rank"]["2"]["place"] + " ( " +
          result["data"]["rank"]["2"]["count"] + " )";
      } else {
        document.getElementById("third").innerHTML = "見つかりません";
      }

      if(result["data"]["rank"]["3"]) {
        document.getElementById("fourth").innerHTML = result["data"]["rank"]["3"]["place"] + " ( " +
          result["data"]["rank"]["3"]["count"] + " )";
      } else {
        document.getElementById("fourth").innerHTML = "見つかりません";
      }

      if(result["data"]["rank"]["4"]) {
        document.getElementById("fifth").innerHTML = result["data"]["rank"]["4"]["place"] + " ( " +
          result["data"]["rank"]["4"]["count"] + " )";
      } else {
        document.getElementById("fifth").innerHTML = "見つかりません";
      }

      if(result["data"]["src_place_twt"][0]) {
        document.getElementById("tweets").innerHTML = result["data"]["src_place_twt"];
      } else {
        document.getElementById("fifth").innerHTML = "見つかりません";
      }
    }
    })
 }


</script>

</body>
</html>

参考: 備忘:ログアウトしてもバックグランドでコマンドを実行し続ける

%d bloggers like this: