JQuery,Ajax
24331 ワード
このプレゼンテーションは、著者の記憶を再確認するために作成されます.
前述の「HTML、CSS、Javascript」に続いて、JQueryとAjaxについて説明します.
JQuery
JQueryは、HTML要素を処理するために便利なJavaScriptをあらかじめ作成したライブラリです.Javascriptはすべての機能を実現できますが、コードが複雑になり、ブラウザ間の互換性に問題があるため、JQueryというライブラリが発生しました.
[JavascriptとJQueryコードの比較]
Javascriptコードdocument.getElementById("element").style.display = "none";
jqueryコード$('#element').hide();
JQueryの使用
JQueryを使用するには、あらかじめ作成されたJavascriptコードをインポートする「インポート」が必要です.以下のアドレスから［Google CDN:］バーのコードを取得すればよい.
住所:https://www.w3schools.com/jquery/jquery_get_started.asp
アドレスからインポートしたコードを次のコードのようにheadラベルに入れ、インポートが完了します.<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
CSSでclassを使用して変更するオブジェクトを示す場合は、JQueryでidを使用します.jqueryとidの使い方は以下のコードで示します.<input id="post-box">
アイデンティティ値が上記と同じ場合は、コンソールウィンドウに次の内容を入力します.これにより、入力ボックスに値を入力できます.$('#post-box').val();
デフォルトではJQueryが使用されます
document.getElementById("element").style.display = "none";$('#element').hide();<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head><input id="post-box">$('#post-box').val();<input id="post-box">
//console
$('#post-box').val(); //input 박스의 값 출력
$('#post-box').val("내용"); //"내용"을 input 박스에 입력 <div id="post=box">
<input>
</div>
//console
$('#post-box').hide(); //div 숨기기(css의 display값이 none으로 바뀐다)
$('#post-box').show(); //div 보이기(css의 display값이 block으로 바뀐다)
$('#post-box').hide();
$('#post-box').css('display'); //none 출력
$('#post-box').show();
$('#post-box').css('display'); //block 출력$('#btn-posting-box').text('내용'); //해당 id의 태그안에 내용이 '내용'으로 변경됨//<div> ~ </div>내에 동적으로 html을 넣고 싶을 때!
<div id="cards-box" class="card-columns">
<div class="card">
<img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">
<div class="card-body">
<a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">여기에 기사 내용이 들어가겠죠</p>
<p class="card-text comment">여기엔 코멘트가 들어갑니다</p>
</div>
</div>
</div>
//1.버튼 넣기
let temp_html = `<button>나는 추가될 버튼입니다!</button>`;
$('#cards-box').append(temp_html);
//주의 : 홀따음표(')가 아니라 backtick(`)을 입력해야 한다.
//2.버튼 말고, 카드 넣기
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html);
//주의 : html에 변수를 넣을때는 ${변수}의 형태로 넣는다.1.backtick(`)を使用して、文字の間にJavascript変数を挿入します.
2.htmlに変数を入れる場合は、${変数}として入れます.
Ajax
Ajaxを開始する前に、JSONを理解する必要があります.JSONは軽量レベルのデータ交換フォーマットです.以下のコードフォーマットをJSONと呼びます.RealtimeCityAir: {
list_total_count: 25,
RESULT: {
CODE: "INFO-000",
MESSAGE: "정상 처리되었습니다"
},
row: [
{
MSRDT: "202107231600",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 35,
PM25: 22,
O3: 0.081,
NO2: 0.018,
CO: 0.5,
SO2: 0.004,
IDEX_NM: "보통",
IDEX_MVL: 93,
ARPLT_MAIN: "O3"
このような形式のJSONを微塵OpenAPIで見るためにはChrome ExtensionのJSOnViewをインストールする必要がある.
この場合、APIは銀行窓口のように、同じ預金窓口においても、個人顧客であるか企業顧客であるかによって導入/処理が必要なものが異なり、顧客が要求しても「タイプ」が存在する.
GET:通常、データ取得要求時
POST:通常、データの作成、更新または削除が必要です.
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
上の住所は大きく2つに分かれています.「?」割れた場所です「?」スタンダード前半は<サーバーアドレス>で、後半は[映画番号]です.
RealtimeCityAir: {
list_total_count: 25,
RESULT: {
CODE: "INFO-000",
MESSAGE: "정상 처리되었습니다"
},
row: [
{
MSRDT: "202107231600",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 35,
PM25: 22,
O3: 0.081,
NO2: 0.018,
CO: 0.5,
SO2: 0.004,
IDEX_NM: "보통",
IDEX_MVL: 93,
ARPLT_MAIN: "O3"このときコードという名前で映画番号をあげましょう!これは誰が決めたのですか.
これがフロントエンド開発者とバックエンド開発者の約束です.
google.com/search?q=iphone&sourcceid=chrome&ie=UTF-8
q=iPhone(検索語)
sourceid=chrome(ブラウザ情報)
ie=UTF-8(符号化情報)
Ajaxデフォルト
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})出力
OpenAPIを使用して、次のフォームの値を表示します.
例)麻浦区:75
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function q1() {
//버튼을 누를때마다 새로고침 된다.
$('#mise').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']
//rows는 리스트이기 때문에 반복문을 통해 값을 나열
for (let i = 0; i < rows.length; i++) {
let mise_gu = rows[i]['MSRSTE_NM'];
let mise_val = rows[i]['IDEX_MVL'];
let temp_html = `<li>${mise_gu} : ${mise_val}</li>`
$('#mise').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<button onclick="q1()">버튼</button>
<ul id="mise">
</ul>
</body>Reference
この問題について(JQuery,Ajax), 我々は、より多くの情報をここで見つけました https://velog.io/@zozo1591/JQueryAjaxテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol