[2]jQuery、Ajaxについて
24326 ワード
「jQuery」(jQuery)は
私のクエリーはオープンソースベースのJavaScriptライブラリで、ウェブサイトでJavaScriptを簡単に使用することができます.2006年、米国のソフトウェア開発者ジョン・レシ(John Resig)は「書くことを少なくし、多くする」と発表した.
Jクエリの特長
document.getElementById("element").style.display = "none";jQueryでもっと直感的です.$('#element').hide();jQueryの使用
jQuery CDNセクションのインポート
jQuery 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>jQueryの使用方法
cssでは、classを選択者として使用するように、id値によって特定の部分を指します.
練習jQueryとJavascriptの組み合わせ
jQueryの練習を終えてから行きます!
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1() {
// 1. input-q1의 입력값을 가져온다.
let value = $('#input-q1').val();
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
if (value == '') {
// 3. alert('입력하세요!') 띄우기
alert('입력하세요!');
} else {
// 4. alert(입력값) 띄우기
alert(value);
}
}
function q2() {
// 1. input-q2 값을 가져온다.
let email = $('#input-q2').val();
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
if (email.includes('@')) {
// 3. [email protected] -> gmail 만 추출해서
// 4. alert(도메인 값);으로 띄우기
let domainWithDot = email.split('@')[1];
let onlyDomain = domainWithDot.split('.')[0];
alert(onlyDomain);
} else {
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
alert('이메일이 아닙니다.');
}
}
function q3() {
// 1. input-q3 값을 가져온다.
let newName = $('#input-q3').val();
if (newName == '') {
alert('이름을 입력하세요');
return;
}
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
let temp_html = `<li>${newName}</li>`;
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
$('#names-q3').append(temp_html);
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty();
}
</script>サーバ-クライアント通信について
クライアントリクエスト時でも「タイプ」は存在します.
JSONはKey:Valueからなっていますデータ型Dictionaryに似た構造.
例)映画カタログ照会
例えば、会員登録、会員登録抹消、パスワード変更
&:他に伝達するデータがあることを示します.
例)Google.com/search?q=iphone&sourcceid=chrome&ie=UTF-8
GETとPOSTの長所と短所と区別
固定アドレスとリンクアドレス(例えば
この問題を解決するには、POSTメソッドを使用します.
保安面で有利である.
Ajaxとは?
サーバとの通信中に他の操作が可能
Ajaxの動作
ブラウザはサーバに情報を要求し,サーバは応答としてデータをサーバに送信する.
(ブラウザはXMLHttpRequestというオブジェクトを実装し、Ajaxリクエストを担当します)
練習Ajax
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
div.question-box > div {
margin-top: 30px;
}
</style>
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rtan",
data: {},
success: function(response){
let imgurl = response['url'];
$("#img-rtan").attr("src", imgurl);
let msg = response['msg'];
$("#text-rtan").text(msg);
}
})
}
</script>
</head>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>3. 르탄이 API를 이용하기!</h2>
<p>아래를 르탄이 사진으로 바꿔주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">르탄이 나와</button>
<div>
<img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
<h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
</div>
</div>
</body>
</html>```Reference
この問題について([2]jQuery、Ajaxについて), 我々は、より多くの情報をここで見つけました https://velog.io/@dbd02017/2-jQuery-서버-클라이언트-통신-Ajax에-대한-이해テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol