JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


JSON PHP


JSON의 일반적인 용도는 웹 서버에서 데이터를 읽고 웹 페이지에 데이터를 표시하는 것입니다.

이 장에서는 클라이언트와 PHP 서버 간에 JSON 데이터를 교환하는 방법을 설명합니다.


PHP 파일

PHP에는 JSON을 처리하는 몇 가지 내장 함수가 있습니다.

PHP의 객체는 PHP 함수 json_encode() 를 사용하여 JSON으로 변환할 수 있습니다 .

PHP 파일

<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

클라이언트 자바스크립트

다음은 AJAX 호출을 사용하여 위의 예에서 PHP 파일을 요청하는 클라이언트의 JavaScript입니다.

예시

JSON.parse()를 사용하여 결과를 JavaScript 객체로 변환합니다.

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "demo_file.php");
xmlhttp.send();


PHP 배열

PHP 함수 json_encode() 를 사용할 때 PHP의 배열도 JSON으로 변환됩니다 .

PHP 파일

<?php
$myArr = array("John", "Mary", "Peter", "Sally");

$myJSON = json_encode($myArr);

echo $myJSON;
?>

클라이언트 자바스크립트

다음은 AJAX 호출을 사용하여 위의 배열 예제에서 PHP 파일을 요청하는 클라이언트의 JavaScript입니다.

예시

JSON.parse()를 사용하여 결과를 JavaScript 배열로 변환합니다.

var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj[2];
}
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();

PHP 데이터베이스

PHP는 서버 측 프로그래밍 언어이며 데이터베이스에 액세스하는 데 사용할 수 있습니다.

서버에 데이터베이스가 있고 "customers"라는 테이블의 첫 번째 행 10개를 요청하는 클라이언트에서 데이터베이스에 요청을 보내려고 한다고 상상해 보십시오.

클라이언트에서 반환하려는 행 수를 설명하는 JSON 객체를 만듭니다.

서버에 요청을 보내기 전에 JSON 개체를 문자열로 변환하고 PHP 페이지의 URL에 매개변수로 보냅니다.

예시

JSON.stringify()를 사용하여 JavaScript 객체를 JSON으로 변환합니다.

const limit = {"limit":10};
const dbParam = JSON.stringify(limit);
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xmlhttp.open("GET","json_demo_db.php?x=" + dbParam);
xmlhttp.send();

설명된 예:

  • "제한" 속성 및 값을 포함하는 개체를 정의합니다.
  • 객체를 JSON 문자열로 변환합니다.
  • JSON 문자열을 매개변수로 사용하여 PHP 파일에 요청을 보냅니다.
  • 요청이 결과(JSON으로)와 함께 반환될 때까지 기다립니다.
  • PHP 파일에서 받은 결과를 표시합니다.

PHP 파일을 살펴보십시오.

PHP 파일

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

PHP 파일 설명:

  • PHP 함수 json_decode() 를 사용하여 요청을 객체로 변환합니다 .
  • 데이터베이스에 액세스하고 요청된 데이터로 배열을 채웁니다.
  • 객체에 배열을 추가하고 json_encode() 함수 를 사용하여 객체를 JSON으로 반환합니다 .

데이터 사용

예시

xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text = "";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}

PHP 메소드 = POST

서버에 데이터를 보낼 때 HTTP POST방법을 사용하는 것이 가장 좋습니다.

메소드를 사용하여 AJAX 요청을 보내려면 POST메소드와 올바른 헤더를 지정하십시오.

send()이제 서버로 전송된 데이터는 메서드 에 대한 인수여야 합니다 .

예시

const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text ="";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_db_post.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

PHP 파일의 유일한 차이점은 전송된 데이터를 가져오는 방법입니다.

PHP 파일

$_GET 대신 $_POST 사용:

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>