무회blog

js(jQuery) Ajax ,Test_003 하기, (http Get method 사용하여 data 읽어 오기) 본문

js/jQuery

js(jQuery) Ajax ,Test_003 하기, (http Get method 사용하여 data 읽어 오기)

최무회 2022. 6. 19. 23:18

html 파일

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./index_ajaxTest_Get_003.js"></script>
</head>

<body>

    <button>Send an HTTP GET request to a page and get the result back</button>

</body>

</html>

 

jQuery 파일

/**
 * js(jQuery) Ajax ,Test_003 하기, (http Get method 사용하여 data 읽어 오기)
 * TODO:
 * , js -> 렌더링 순서 , html -> head -> body , (CSS -> DOM 순서), 외부 링크 CSS 먼저/ Script body 아래 추천
 * , js -> ajax(test)
 * , 참고사이트 : https://www.w3schools.com/jquery/jquery_ajax_load.asp
 */
$(document).ready(function () {
  $("button").click(function () {
    url = "https://jsonplaceholder.typicode.com/todos/20";
    // $.get("demo_test.asp", function (data, status) {
    $.get(url, function (data, status) {
      alert("Data: " + data + "\nStatus: " + status);
      console.log("data: ", JSON.stringify(data));
    });
  });
});

 

 

저작자표시 비영리 변경금지

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

js(jQuery) Ajax ,Test_002 하기, (https url경로의 json 데이터 load 해서 읽어 오기)  (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