무회blog

js(jQuery) Ajax ,Test_002 하기, (https url경로의 json 데이터 load 해서 읽어 오기) 본문

js/jQuery

js(jQuery) Ajax ,Test_002 하기, (https url경로의 json 데이터 load 해서 읽어 오기)

최무회 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);
      });
    });
  });
});
저작자표시 비영리 변경금지

'js > jQuery' 카테고리의 다른 글

js(jQuery) Ajax ,Test_003 하기, (http Get method 사용하여 data 읽어 오기)  (0) 2022.06.19
js(jQuery) Ajax ,Test_001 하기, (txt 파일 load 해서 읽어 오기)  (0) 2022.06.19
//지정내용, 그리드 제목 없애기 / jQuery_css  (0) 2022.06.14
BootStrap 모달창 넣기  (0) 2022.06.13
제이쿼리라이브러리 , jquery-3.4.1.js  (0) 2020.04.09
'js/jQuery' Related Articles more
Comments