JavaScriptにdivと各種タグを追加

1866 ワード
ajax通信 json配列 JavaScript json ばね ココアブック検索API テキストリンク

論理的説明

  • Javascript ajax受信Kakabook検索APIで受信したJSONファイル

  • JSON配列長のようなDIVなど複数のタグを繰り返し文で追加

  • Kakao Book検索APIとKakaoサーバ側のHTTPリクエスト

  • 次の投稿にアップロードします。

  • 上の写真はココ検索時に応答するJSON値で、結果値が大きいと配列形式
    • になります

    GET要求を
  • スプリングサーバ側に送信し、受信したい値はJSONタイプ
    • である.
  • を受け取るとすぐにパラメータ結果ResultListBook関数
    • が生成される.
  • 6行は、確認のためのコード
    • である.
  • 10行目:createElementを使用してdivラベル
    • を追加および保存
  • 11行目:重複する数字
    • にIDを追加する.
  • 12行目:簡単なテキストを追加し、json(後でアップロード)
    • にアクセスします.
  • 13行目:宣言で終了するのではなく、設定したdiv要素にサブ要素として追加する必要があります.
  • 第14行:私が望んでいる機能がなく、自分ですべて入力するつもりです.
    • function ResultlistBook(result) {
	if (result.documents[0] != null) {
		console.log('ajax통신확인' + result.documents[0].authors)
		// 반복문으로 모두 출력

		for (i = 0; i < result.documents.length; i++) {
			const BookListDiv = document.createElement('div');
			BookListDiv.id = 'newDiv' + i
			const newText = document.createTextNode(result.documents[i].title);
			BookListDiv.appendChild(newText);
			BookListDiv.innerHTML += '<br><a href=\'#\'>테스트 a태그 : '+i+'</a>'
			
			document.body.appendChild(BookListDiv);
		}



	}



}
  • 結果写真
    • Perl学習のまとめ
    Aug 02, 2021, TIL (Today I Learned) - Basic Animation