🐘 php ↔ javascript 변수 전달하는 법

php → javascript 전달

 

1. echo() 사용

script 태그 내에서 php 섹션으로 변수를 정의하는 코드 자체를 문자열로 echo 하면, 곧 자바스크립트 코드 실행이 되게 된다.

<?php
   $var = 'Metallica';
?>

<script>
   <?php
       echo "var jsvar = '$var';";
   ?>
   console.log(jsvar); 
</script>

 

2. form으로 지정

input 태그의 value 속성 부분에 문자열로 php 섹션 변수를 쓰면 html 값으로 들어가게 된다.

<form>
    <input type="hidden" name="name" id="name" value="<?php $value?>">
    <!-- value에 php변수를 넣고, hidden으로 태그를 숨긴다. 숨겨진 태그를 불러와 쓰기만 하면 된다. -->
</form>
<script>
   var value = '';
   value = $("#name").val();
</script>

---

javascript → php 전달

 

1. url로 파라미터 전달

기본적으로 php는 서버 언어이기 때문에, http GET 요청을 이용하여, url에 ? 뒤에 키1=값1&키2=값2 을 통해 값을 전달해줄 수 있다.

https://abc.tistory.com?key1=value1&key2=value2

 

2. form으로 전달

폼 태그를 통해 submit을 하면 서버로 폼 값을 전달하게 된다.

이때 input 태그에 name과 value값을 지정해놓고 form으로 서버 전달하면, php에서 넘어온 input태그의 값을 변수로 조회하여 받아 쓸 수 있게 된다.

<form name="Form" method="POST" action="process.php">
   <button class='buttons' id='startBtn' type='button'>START</button>
   <button class='buttons' id='restartBtn' type='button'>RESTART</button>
   <button class='buttons' id='submitBtn' type="submit" onclick="submitScore()">SUBMIT</button>
   <input type="hidden" id="username" name="username" value="">
   <input type="hidden" id="score" name="score" value="">
</form>

<script>
    function submitScore(){
       var username = prompt("What is your name?"); // 사용자로부터 값을 입력 받고
       document.getElementById('username').value = username; // input 태그의 value 속성값으로 넣는다
       document.getElementById('score').value = "99";
    }
</script>