HTML, javaScript, jQuery 는 Client에서 해석하는 언어이고, PHP는 서버와의 통신을 위한 스크립트 언어다.
서버상에서 가져온 파일을 읽으려면 클라이언트에서 인식할 수 있도록 해줘야 한다.
아니면 PHP 코드를 HTML 파일보다 먼저 읽어들이도록 위치를 위에다 놓은 것도 방법이다.
눈에 보이지 않게 <div id="div1" data-lat="<?php echo $lat;?>"></div> 를 이용해서 PHP 변수를 기록하면, HTML 에 기록된 내용을 jQuery, javaScript 에서 읽어올 수 있다.
PHP 변수를 받는 방법은 다른 파일에서 넘겨준 걸 읽을 때는 $_GET, $_POST 배열로 받아서 처리하면 된다.
아니면 직접 include_once '읽고자하는 파일'; 을 지정해주고 파일을 include 하면 해당 파일의 변수가 인식된다.
속성값 읽어오기
자바스크립트에서는 document.getElementById('div1').getAttribute('data-lat');
jQuery 에서는 $("#div1").attr('data-lat');
속성값 변경하기
자바스크립트에서는 document.getElementById('div1').setAttribute('data-lat','변경할값');
jQuery 에서는 $("#div1").attr('data-lat','변경할값');
DB에서 테이블 형태로 읽어온 걸 화면에 표시하고 테이블내 한 행의 게시글의 특정 정보를 알아내고자 할 때에는 this 를 사용한다.
group=$(this).attr('data-group');
==== 예제 파일 =====
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ // html 문서를 다 읽어들인 후
//var lat = $("#div1").attr('data-lat'); // jQuery 방식
var lat = document.getElementById('div1').getAttribute('data-lat'); // javaScript 방식
var lon = $("#div2").attr('data-lon');
alert("lat:"+ lat +" lon:"+ lon);
});
</script>
<body>
<?php
//include_once 'getPHP.php'; 다른 파일 내용을 읽어오고자 할 때
$lat = 33.4505296;
$lon = 126.570667;
?>
<div id="div1" data-lat="<?php echo $lat;?>"></div>
<div id="div2" data-lon="<?php echo $lon;?>"></div>
</body>
</html>
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| [jQuery] option selected 값 읽어오기 및 Ajax 결과 받기 (1) | 2016.11.17 |
|---|---|
| [jQuery] option selected 값 읽어오기 (0) | 2016.11.17 |
| [jQuery] option selected 속성 변경 (0) | 2016.10.23 |
| jQuery 모달(dialog) 코드 이해하기 (2) | 2016.10.11 |
| jQuey 새창 띄우기 (0) | 2016.07.11 |
Link2Me
