PHP 및 JavaScript 공동 작업

개요

본고는 PHP와 JavaScript(이하 JS) 사이의 데이터 교환 방법을 소개할 것이다.
특히 프레임 등을 쓰지 말고 함께 원주민 표기법을 쓴다.

PHP에서 JS로의 데이터 전달

처음에 알아야 할 것으로서 프로그램이 어떤 순서로 실행되는지 알아야 한다.

서버 측 PHP 처리를 위해 서버에 요청

서버에서 다시 페이지에 HTML 파일을 포함하는 클라이언트 측 JS

이후 설정된 시간에 JS의 창입니다.온로드, 각종 이벤트리스 등

실행
즉, PHP가 먼저 실행되고 포함된 것입니다.

이런 처리 명령은 처리 결과로 바꾸어 JS에 건네준다.
(단, 파일의 확장자는.php로 설정하십시오)
예:
PHP_to_JS.php

<script>
<?php
$hoge = "Test";
$piyo = "fuga";
?>
let hoge = "<?php echo $hoge; ?>";
let fuga = <?php echo "10+20"; ?>;
let piyo = <?php echo $piyo;?>*<?php echo $piyo;?>;
console.log(hoge);
console.log(fuga);
console.log(piyo);
</script>

이것은 서버가 PHP를 처리한 후의 <63?php ?>태그 대체
PHP_to_JS_PHPexecuted.php

<script>
let hoge = "Test";
let fuga = 10+20;
let piyo = fuga*fuga;
console.log(hoge); //-> Test
console.log(fuga); //-> 30
console.log(piyo); //-> 900
</script>

같다
그러니까 PHP에서 JS까지 간단해.
JS 코드에 넣고 싶은 곳으로 PHP 변수 echo를 넣으면 됩니다.

JS에서 PHP로의 데이터 전송(GET)

이쪽은 좀 귀찮아요.XMLHttpRequest 레벨의 JS 구조를 사용합니다.
간단하게 말하면 이것은 JS에서 외부 파일을 가져오는 메커니즘으로 PHP 파일뿐만 아니라 이미지와 음성 파일도 처리할 수 있다.(영상은 어때요?)
실제 대처 오류 등은 더 복잡해지고 어쨌든 행동의 틀을 드러낼 것이다.
먼저 GET 통신을 시작하고 다음은 GET 변수입니다.
$_GET['hoge'] = 123
XHRGET_receiver.php에 보내는 중입니다.
XHR_GET.html

<script>
	let xhr = new XMLHttpRequest();

	//openの第三引数は非同期(true)で行うと言う指定
	xhr.open("GET","./XHR_GET_receiver.php?hoge=123",true); 
	xhr.responseType = "text"; //結果をテキスト形式で取得
	xhr.addEventListener('load', function(event){
		console.log(xhr.response); //->本来のメインの出力
		console.log(event.target.response); //->イベントにも入る
	});
	xhr.send(null);
</script>

읽기 완료 후 xhr를 기다리는 데 addEventListener를 사용해야 합니다.send를 진행하십시오.그렇지 않으면, 먼저send가 완성된 상황이 발생하면, 트리거 등록을 하기 전에send가 완성되면 이벤트가 발생하지 않습니다.send의 매개변수가 GET인 경우 null입니다.그리고 요청을 PHP에 보낸 후 xhr가 불러오면 컨트롤러로 출력합니다.
다른 한편, 요청을 받은 PHP 파일은 매우 간단합니다.
출력하고 싶은 물건을 echo 등으로 출력하면 xhr입니다.상태에 들어가다.
그리고 이벤트리스에서 발생한 이벤트 이벤트에서 출력을 얻을 수 있습니다.
XHR_GET_receiver.php

<?php
echo "It works!!".$_GET['hoge'];

이 두 파일을 출력하는 브라우저 컨트롤러는 다음과 같습니다.

It works!!123
It works!!123

JS에서 PHP로의 데이터 전송(POST)

그럼 POST 보내주신 분도 함께 보시죠.POST는 FormData 클래스를 사용합니다.
방금 텍스트로 수치를 받았는데 이번엔 JSON으로 받아들이세요.
XHR_POST.html

<meta charset="utf-8" />
<script>
	let xhr = new XMLHttpRequest();
	xhr.open('POST', './XHR_POST_receiver.php', true);
	xhr.responseType = 'json'; //JSON形式で取得
	xhr.addEventListener('load', function(event) {
		console.log(xhr.response.his_name);
		console.log(xhr.response.num);
	});
	let fd = new FormData();
	fd.append("name","ギュスターヴ");
	fd.append("number","XIII");
	xhr.send(fd);
</script>

이번에는 xhr입니다.responseType을 사용하여 JSON 형식으로 취득하기로 결정했습니다.
FormData 클래스는 POST를 보낼 때 데이터를 저장하는 방법을 제공합니다.
이거 xhr.send () 의 매개 변수를 건네주면 됩니다.그리고
아까와 마찬가지로 이블라스가 불을 붙이기를 기다린다.
한편
XHR_POST_receiver.php

<?php
$array = array();

$array["his_name"] = $_POST['name'];
$array["num"] = $_POST['number'];

echo json_encode($array);

그렇게
$_POST['name']
등 데이터를 받을 수 있다.
여기서도 데이터베이스에 접근할 수 있다.
json_encode ()는 매우 편리하니 꼭 사용하세요.
이렇게 하면 $aray에서 JSON까지의 성형 + 인코딩을 간단하게 실행할 수 있습니다.
콘솔 출력

ギュスターヴ
XIII

.
오늘은 여기까지.수고하셨습니다.