開発ログ2週目
Javascript / Jquery / AJAX
[ターゲット]
[1週間勉強した後の感想]
[事前に知っていたこと]
つまり、リフレッシュすることなくデータ変更を受信することができる.
APIになればいいと思います.
[新知]
つまり、専門開発者は作成したコードを使っています.
OPEN APIは通常、KEY:VALUEからなるオブジェクトフォーマットである.
(1)GET=その名の通りお願いです.READと同様に、要求された情報を取得して読み取り可能にすることもできる.
(2)POST=作成・修正・削除可能な機能.
JQUERY
(1)「element」要素を非表示にするコードを作成する必要があるとします。
(JavaScriptの場合)
document.getElementById("element").style.display="none";
(jqueryの場合)
$('element').hide()のように短く書くことができます.
同じ機能がありますが、2つの機能のうちの1つを使ってAJAXを使うともっと役に立ちます.そのため、実際の仕事では、jqueryを使う人が多く選ばれます.
(2)JQeuryを使うために、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>これらのスクリプトは、
<head></haed>などのheadラベルに宣言する必要があります.(3)JQuery実践とコード
AJAX
(1)AJAXを使うために、
前述したように、JQueryを導入した場所でしか使用できません.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>(2)AJAX基本骨格(GET)
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})実習例
このように、ソウル市のAPIを持ってきて、リアルタイムのスモッグ状態を受け入れた.
70を超える場所は赤色に符号化されています.
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response['RealtimeCityAir']['row']
for (let i =0; i<rows.length ; i++){
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = ''
if(gu_mise > 70){
temp_html= `<li class="bad">${gu_name} : ${gu_mise}</li>`
}else{
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
}
})
}実験例2
ドル−ウォンレートAPIを通じてレート情報を提供した.
$('#rate').text(rows)そうですか.textを利用すると中のtextだけが変わります.本人はこう書いています.
<p class="rate">달러-원 환율 : <span id="rate"></span> </p>こうして2週目も勉強に励みました
Reference
この問題について(開発ログ2週目), 我々は、より多くの情報をここで見つけました https://velog.io/@jrj60417/개발일지-2주차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol