flask10

AJAX (Asynchronous Javascript And XML)를 공부 하기 위해 필요한 HTML과 jquery 기본에 대해서 알아 본다.

AJAX를 사용하기 위한 필수 HTML 코드를 빨간색 볼드로 표시 하였다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div id="ptest1">
    <p>kimchulsu</p>
</div>
<p id="ptest2">hello.</p>

<input type="button" name="btn-test" id="btn-test" value="마이버튼 테스트" />

<script type="text/javascript">

$("#ptest1").html("<h2>나야나.</h2>");
$("#ptest2").text("mymy");

$("#btn-test").on("click", function () {
    do_test();
    console.log("objs=", objs);
});

function do_test(){
   alert("btn-test 클릭");
}

</script>
</body>

</html>

jqery 임포트 하기

버튼 추가

html에서는 다음과 같이 추가 한다.

<input type="button" name="btn-test" id="btn-test" value="마이버튼 테스트" />

jquery 코드는 다음과 같이 추가 한다.

$("#btn-test").on("click", function () {
    do_test();
    console.log("objs=", objs);
});

function do_test(){
   alert("btn-test 클릭");
}

.html() 메소드

해당 요소의 내용을 반환하거나 요소내의 내용을 변경한다.

변경전 html 코드

<div id="ptest1">
<p>kimchulsu</p>
</div>

jquery 코드

$("#ptest1").html("<h2>나야나.</h2>");

변경후 html 코드

<div id="ptest1">
<h2>나야 나.</h2>
</div>

.text() 메소드

해당 요소의 내용을 변경한다.

변경전 html 코드

<p id="ptest2">hello.</p>

jquery 코드

$("#ptest2").text("mymy");

변경후 html 코드

<p id="ptest2">mymy</p>

참고)
.html() , .text() 메소드
https: //www.devkuma.com/docs/jquery/요소의-내부-변경-html--text-/

요소내의 html 코드 변경 .html() 자세하게 설명
https: //bskyvision.com/entry/jquery-html-메서드

Ajax를 품은 jQuery
https://www.nextree.co.kr/p4771/