jQuery, 서버-클라이언트, Ajax
jQuery
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해 둔 라이브러리
- <head>~</head>에 import 해놔야 사용가능
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/\
jquery.min.js"></script>
- css에서는 class, jQuery에서는 id# input 박스의 값을 가져오기 (콘솔창에 쳐보기)
<div class="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input id="post-url" type="email" class="form-control"\
aria-describedby="emailHelp" placeholder="">
</div>
</div>
-> $('#post-url').val();
# div 보이기, 숨기기(보여지고 있으면 css의 display 값은 block = jQuery 값은 show)
$('#posting-box').hide(); # $('#post-box').css('display');
# css의 display 값 가져오기 -> none
$('#posting-box').show(); # $('#post-box').css('display');
# css의 display 값 가져오기 -> block
# input박스의 경우
('#post-url').val('여기에 텍스트를 입력하면!');
# 버튼의 텍스트를 바꾸고 싶은 경우
<button id="btn-posting-box" type="button">포스팅 박스 열기</button>
$('#btn-posting-box').text('포스팅 박스 닫기');
포스팅 박스 열기 -> 포스팅 박스 닫기 로 바뀜
# 태그 내 html 입력하기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html); # id=cards-box에 버튼 추가
# 예시(포스팅 박스의 열기 버튼의 글싸 바꾸기)
<button id="btn-posting-box" onclick="openclose()">포스팅박스 열기</a>
function openclose() {
// id 값 post-box의 display 값이 block 이면
if ($('#post-box').css('display') == 'block') {
// post-box를 가리고
$('#post-box').hide();
// 가렸으니까 이제 열기로 바꿔두기
$('#btn-posting-box').text('포스팅 박스 열기');
} else {
// 아니면 post-box를 펴라
$('#post-box').show();
// 폈으니까 이제 닫기로 바꿔두기
$('#btn-posting-box').text('포스팅 박스 닫기');
}
}
서버-클라이언트
서버 -> 클라이언트(JSON : Javascript Object Notation)
- 웹과 컴퓨터 프로그램에서 용량이 적은 데이터를 교환하기위해 데이터 객체를 속성:값의 쌍 형태로 표현하는 방식
- Key:Value 형태
클라이언트 -> 서버(API : Application programming interface)
- 운영체제와 응용프로그램 사이의 통신에 사용되는 언어
- 클라이언트가 데이터베이스에 접근하려 할 때 연결시켜주는 매개체, 규칙들의 집합
- 예시) 날씨 데이터 같은 공공 데이터에 접근할 수 있도록 기상청 API를 제공함
- GET 요청 : 데이터 조회(Read)
- POST 요청 : 데이터 생성, 변경, 삭제(Create, Update, Delete)
Ajax(Asynchronous Javascript and XML)
HTML만으로는 어려운 다양한 작업을 웹페이지에서 구현해 이용자가 웹페이지와 자유롭게 상호작용할 수 있도록 하는 기술
- jQuery를 임포트한 페이지에서만 동작 가능
- 기본 골격
$.ajax({
type: "GET", # get방식으로 요청함.
url: "여기에URL을입력", # 요청할 url
data: {}, # 요청하면서 함께 줄 데이터 (get요청시엔 비워두기)
success: function(response){ # 서버에서 준 결과를 response라는 변수에 담기
console.log(response) # 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})함수
# 로딩 후 호출하기
$(document).ready(function(){
alert('다 로딩됐다!')
});
# API 코드와 Ajax 코드 비교
@app.route('/diary', methods=['GET'])
def show_diary():
sample_receive = request.args.get('sample_give')
print(sample_receive) ^
return jsonify({'msg': 'GET 연결 완료!'}) |
|
|
$.ajax({ |
type: "GET", |
url: "/diary?sample_give=샘플데이터", # 샘플데이터 값
data: {},
success: function(response){ # response ={'msg' : 'GET 연결 완료!'}
alert(response['msg']) # GET 연결 완료!
}
})샘플데이터 -> sample_give -> sample_receive
hi -> word_give -> word_receive
하루에 한 개념씩