실시간 페이지 갱신 (ajax 이용)

프로그래밍/HTML & JavaScript|2020. 5. 26. 14:33
반응형

index.html

<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="css/table.css" />
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>

<!-- 자동 갱신 스크립트 include -->
<script>
var timerID;
$(document).ready(function() {
    $('#execute').on('click',function(e) {
        e.preventDefault();
        updateData();
    });
    $('#stop').on('click',function(e) {
        e.preventDefault();
        clearTimeout(timerID); // 타이머 중지
        $('#showtime').html('');
    });
});

function updateData() {
    $.ajax({
        url: "getserver.php",
        type: "post",
        cache : false,
        success: function(data) { // getserver.php 파일에서 echo 결과값이 data 임
            $('#showtime').html(data);
        }
    });
    timerID = setTimeout("updateData()", 1000); // 1초 단위로 갱신 처리
}
</script>
</head>

<body>
<p>time : <span id="showtime"></span></p>
<input type="button" id="execute" value="실행" />
<input type="button" id="stop" value="중지" />
</body>
</html>

 

getserver.php

<?php
    $time = date("H:m:s");
    echo $time;
?>

 

작성 후 index.html 을 불러오면, '실행' 버튼을 눌렀을때 주기적으로 getserver.php 가 실행되어 빨간색 showtime 부분에  출력됩니다.

 

'실행' 버튼 누를 필요없이 자동으로 클릭한 효과를 얻으려면 아래와 같이 조치합니다.

1) input 두개의 type 을 hidden 으로 숨깁니다.

2) 아래 코드를 추가합니다.

<script>

        window.onload = function() {

                document.getElementById('execute').click();

        }

</script>

 

 

출처 : https://link2me.tistory.com/1139 [소소한 일상 및 업무TIP 다루기]

반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

on,off 스위치 만들기 (토글버튼: Togglebutton)  (0) 2020.06.05
input 으로 작성한 button 자동 클릭하기  (0) 2020.05.26
스크롤바 항상 출력 시키기  (0) 2020.05.08
iframe 부모 url 을 PHP 변수에 넣고 출력하기  (0) 2020.03.18
input 클릭시 기본 텍스트 사라지게 하기  (0) 2020.03.06

댓글()

티스토리툴바