TIL(#2) - 3.02

9215 ワード
API ajax POST テキストリンク

今日、Naver Search APIを使用して、地域、旅行先、住所にデータをインポートし、クライアントサーバにダウンロードするコードを作成しました.
まず、設計構造はこうです.
  • HTMLでは、領域
    • がカード形式で表示する.
  • 地区カード「onclick()」の場合、当該地区の関連観光地は最大5つのカードの形で現れる(Naver API max displayは5つに制限)
  • エリアカードの1つをクリックすると、宿泊先は最大5つのカードで
    • が表示されます.
  • 三つの場所、観光地、宿泊をクリックし、保存ボタンをクリックしてMongo DBに保存する
  • に格納MongoDBをMypageに読み込み
    • を取得する.
    今日は最初の部分を行いました
    Naver API開発者ガイド
    HTMLでajaxを作成し、必要なキーワードをデータに送信します.その後、Naver APIでキーワードを検索し、検索したDickShownery(Json)をクライアントに再送信して表示します.
    NAVERを用いてAPIを検索するためには、NAVER APIを申請し、申請の内容に応じてID&PWを与える必要がある.
    Naver Search APIの例
    def accommodation_attraction(value):
   client_id = "ID"
   client_secret = "PW"
   encText = urllib.parse.quote(value)
   url = "https://openapi.naver.com/v1/search/local.json?query=" + encText +  "&display=5" + "&sort=comment" # json 결과
   # url = "https://openapi.naver.com/v1/search/blog.xml?query=" + encText # xml 결과
   request = urllib.request.Request(url)
   request.add_header("X-Naver-Client-Id", client_id)
   request.add_header("X-Naver-Client-Secret", client_secret)
   response = urllib.request.urlopen(request)
   rescode = response.getcode()
   if(rescode==200):
      response_body = response.read()
      result = response_body.decode('utf-8')
      print(result)
      return result
   else:
      print("Errosr Code:" + rescode)
    この関数は、寮のリストを取得するための関数であり、jsonifyの関数を作成します.
    例
    def test_post3():
   place_receive = request.form['place_give'] + "숙박"
   result_return2 = accommodation_attraction(place_receive)
   print(jsonify({'accommodations' : result_return2}))
   return jsonify({'accommodations' : result_return2})
    **注意事項:Jsonデータの転送時にadvanctionsと定義されているのでhtmlで使用する場合は必ずjson parseと書きます!
    
        success: function (response) {
            places_receive = JSON.parse(response['places'])['items'];
            for (let i = 0; i < places_receive.length; i++) {
                place_name = places_receive[i]['title'];
                place_url = places_receive[i]['link'];
                place_category = places_receive[i]['category'];
                place_phone = places_receive[i]['telephone'];
                place_address = places_receive[i]['address'];
                console.log(place_name, place_url, place_category, place_phone, place_address);
    これらのコードを理解するのに時間がかかりすぎました...
    [TIL#3]React-Props、Stateは?
    C#byte配列とImageの相互変換