웹 서버에서 json 받아서 처리하기
조회수 677회
서버 php 에 값을 요청해서 json 으로 값을 받아서 그 목록을 리스트로 띄우고 싶은데 어떤식으로 json을 받아와야 할지 모르겠습니다.. 어떤식으로 찾아봐야 할지도 감이 안와서 도움을 요청합니다.. http://ip/파일이름.php 이런식의 주소로 php에다가 요청을 해야되는것 같은데 어떤식으로 요청을 해야될지 모르겠습니다
-
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
3 답변
-
하시고자 하는 작업은 총 3단계로 이루어져 있습니다.
- JSON 본문을 만든다. (PHP서버가)
- 만든 JSON 본문을 얻는다. (웹브라우저에서 실행되는 자바스크립트가)
- 얻은 JSON 본문 내용을 앞에서부터 하나씩 처리한다. (자바스크립트가)
1단계는... 간단하게 흉내를 내보죠. 아무 php 파일이나 만들어서 이렇게 저장해 보세요.
<?php echo 'var jason = '.json_encode([ 'data' => [ ['foo' => 'bar', 'lorem' => 1], ['foo' => 'dee', 'lorem' => 2] ] ]).';';그리고 HTML을 대충 이렇게 작성해 보세요.
<html> <body> <div id="result"></div> <script src="아까만든php파일URL.php"></script><!-- 얘가 무조건 먼저 나와야 함. 그냥 jason 변수를 PHP 텍스트본문으로 바로 가져오고 있음 --> <script> if (jason.length && jason.data) { for (i = 0; i < jason.data.length; i++) { var onedata = jason.data[i]; document.getElementById('result').innerHTML += '<p>foo = ' + onedata.foo + ', lorem = ' + onedata.lorem + '</p>'; } } </script> </body> </html>그러면 결과적으로 이 데모와 비슷한 것을 얻으실 수 있을 겁니다. 사실은 PHP건 자바건 결과적으로 자바스크립트의
JSON.parse()에 넣을 수 있는 유효한 형식의 문자열만 만들면 되는 부분입니다. 리스트로 띄우는 건 정말 마지막에 간단하게 하는 작업이구요.시도해 보세요!
-
<!Doctype html> <head> <script> function httpGet(theUrl) { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { return xmlhttp.responseText; } else { return null; } } xmlhttp.open("GET", theUrl, false); xmlhttp.send(); } var php = httpGet("http://ip주소/test.php"); var json = JSON.parse(php); // -- 여기까지 2단계, 여기서부터 3단계 if (json.data) { for (i = 0; i < php.data.length; i++) { var onedata = php.data[i]; document.getElementById('result').innerHTML += '<p>foo = ' + o nedata.foo + ', lorem = ' + onedata.lorem + '</p>'; } } </script> </head>이대로 돌렸는데 왜 하얀화면만 뜰까요..ㅠㅠ
-
(•́ ✖ •̀)
알 수 없는 사용자
- http://ip주소/test.php 에 그냥 접속하면 JSON 문자열 나오나요? F12 눌러서 나오는 개발자도구 콘솔에는 무슨 에러가 나오나요? 그보다 일단 이 스크립트는 body 태그 닫기 직전에 넣으시고, body에 div 하나 만들어서 id="result" 줘보세요. 제가 올려드린 데모를 잘 봐주세요. 엽토군 2020.4.17 17:34
- 넵! 그 주소 접속하면 바로 문자열 나옵니다! 알 수 없는 사용자 2020.4.17 17:41
- Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 알 수 없는 사용자 2020.4.17 17:41
- server.html:20 Access to XMLHttpRequest at 'http://ip/test.php' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 알 수 없는 사용자 2020.4.17 17:41
- 이렇게 에러가 나옵니당! 알 수 없는 사용자 2020.4.17 17:41
- 동일출처정책에서 걸리고 있네요. 시간이 없으니까 https://brunch.co.kr/@adrenalinee31/1 이거는 나중에 읽어보시고, 일단은 답변글을 수정할 테니 그거대로 해주세요. 엽토군 2020.4.17 17:48
- 그리고 이런 자료로 공부를 시작하세요. https://www.w3schools.com/js/js_json_php.asp 엽토군 2020.4.17 18:01
- 열심히 찾아봐도 해결이 어렵네요..ㅎㅎㅎㅎ 알 수 없는 사용자 2020.4.17 19:35
-
-
var php = '{"data":[{"foo":"bar","lorem":1},{"foo":"dee","lorem":2}]}';이런식으로 php 를 선언했을때는 json 파싱이 정상적으로 되는데 httpget을 써서 php url 을 http:// ip/test.php 이렇게 넣으니까 json을 받아오지를 못하는데 여기서 또 막혀버렸네요 ㅠㅠ 저 위에 http:// ip/test.php 를 주소창에 쓰면 {"data":[{"foo":"bar","lorem":1},{"foo":"dee","lorem":2}]}'; 이 데이터가 똑같이 나오는데 말이죠..ㅠㅠ
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력