js/jQuery
js(jQuery) Ajax ,Test_002 하기, (https url경로의 json 데이터 load 해서 읽어 오기)
sucun
2022. 6. 19. 21:35
html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<button>Get External Content</button>
</body>
<script src="./index_ajaxTestHttps_002.js"></script>
</html>js 파일
/**
* js(jQuery) Ajax ,Test_002 하기, (https url경로의 json 데이터 load 해서 읽어 오기)
* TODO:
* , js -> 렌더링 순서 , html -> head -> body , (CSS -> DOM 순서), 외부 링크 CSS 먼저/ Script body 아래 추천
* , js -> ajax(test)
* , 참고사이트 : https://www.w3schools.com/jquery/jquery_ajax_load.asp
*/
$(function () {
/**
* test load, to
* responseTxt - 호출성공시 결과 내용 포함 / contains the resulting content if the call succeeds
* statusTxt - 상태 포함 / contains the status of the call
* xhr - XMLHttpRequest 객체 포함 / contains the XMLHttpRequest object
*/
// ----------------------------------------
$(function () {
$("button").click(function () {
url = "https://jsonplaceholder.typicode.com/todos/20";
$("#div1").load(url, function (responseTxt, statusTxt, xhr) {
console.log("clickButton");
if (statusTxt == "success")
alert("External content loaded successfully!");
if (statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
});
});반응형