PHP를 사용하여 JS에 배열을 전달하고 데이터를 처리하는 방법

PHPz
풀어 주다: 2023-04-18 14:35:47
원래의
698명이 탐색했습니다.

최근 웹 애플리케이션을 개발할 때 PHP와 JS 간의 데이터 전송, 특히 배열과 같은 복잡한 데이터 구조의 전송이 관련되는 경우가 많습니다. 이 기사에서는 주로 PHP를 사용하여 배열을 JS에 전달하고 이러한 데이터를 JS에서 사용하는 방법을 소개합니다.

1. PHP 배열을 JSON 형식으로 변환

PHP에서는 배열을 직접 사용하여 데이터를 저장할 수 있습니다. 하지만 JS에서는 배열이 일반적으로 JSON(JavaScript Object Notation) 형식으로 표현됩니다. JSON은 이해하고 처리하기 쉬운 경량 데이터 교환 형식입니다. 따라서 PHP 배열을 JS에 전달하기 전에 배열을 JSON 형식으로 변환해야 합니다.

PHP는 PHP 배열을 JSON 형식으로 변환할 수 있는 내장 함수 json_encode()를 제공합니다. 샘플 코드는 다음과 같습니다.

<?php
$array = array(
    &#39;name&#39; => '张三',
    'age' => 25,
    'interests' => array('篮球', '游泳', '音乐')
);
$json = json_encode($array);
echo $json;
?>
로그인 후 복사

위 코드에서는 연관 배열 $array를 정의하고 이를 JSON 형식으로 변환한 후 echo 문을 사용하여 JSON을 화면에 출력합니다. 출력 결과는 다음과 같습니다.

{"name":"张三","age":25,"interests":["篮球","游泳","音乐"]}
로그인 후 복사

2. JS에서 JSON 데이터 구문 분석

JS에서는 내장된 JSON 객체를 사용하여 JSON 데이터를 구문 분석할 수 있습니다. JSON 객체에는 두 가지 주요 메서드인parse()와 stringify()가 있습니다. 그 중, JSON 문자열을 파싱하여 JS 객체나 배열로 변환하는 데는parse() 메서드가 사용되며, JS 객체나 배열을 JSON 문자열로 변환하는 데에는 stringify() 메서드가 사용됩니다.

다음은 JSON.parse() 메서드를 사용하여 이전 섹션의 JSON 데이터 출력을 구문 분석하는 샘플 코드입니다.

var json = '{"name":"张三","age":25,"interests":["篮球","游泳","音乐"]}';
var obj = JSON.parse(json);
console.log(obj.name);          //输出:张三
console.log(obj.age);           //输出:25
console.log(obj.interests[0]);  //输出:篮球
로그인 후 복사

위 코드에서는 JSON 문자열 json을 정의하고 JSON.parse() 메서드를 사용하여 구문 분석합니다. JS 객체 obj로 변환합니다. 그런 다음 obj의 속성에 액세스하여 배열의 데이터를 가져올 수 있습니다.

JSON 문자열 형식이 올바르지 않으면 구문 분석() 메서드에서 예외가 발생한다는 점에 유의하세요.

3. JSON 데이터를 JS로 전달

이제 우리는 PHP에서 배열을 JSON 형식으로 변환하고 JS에서 JSON 데이터를 구문 분석하는 방법을 이미 알고 있습니다. 다음으로 JSON 데이터를 JS로 전달하는 방법을 살펴보겠습니다.

JSON 데이터를 JS에 전달하는 일반적인 방법에는 두 가지가 있습니다. 즉, JSON 문자열을 JS 변수로 직접 사용하거나 AJAX 기술을 사용하여 서버에서 JSON 데이터를 가져오는 것입니다.

  1. JSON 문자열을 JS 변수로 사용

이 방법은 이미 JSON 문자열이 있는 상황에 적합합니다. JSON 문자열을 JS 변수로 직접 사용할 수 있습니다.

JSON 문자열을 JS 변수로 사용하는 샘플 코드는 다음과 같습니다.

<?php
$array = array(
    &#39;name&#39; => '张三',
    'age' => 25,
    'interests' => array('篮球', '游泳', '音乐')
);
$json = json_encode($array);
?>
<script type="text/javascript">
var json = '<?php echo $json; ?>';
var obj = JSON.parse(json);
console.log(obj.name);          //输出:张三
console.log(obj.age);           //输出:25
console.log(obj.interests[0]);  //输出:篮球
</script>
로그인 후 복사

위 코드에서는 PHP 코드에서 JSON 문자열을 생성하여 JavaScript 변수 json에 전달했습니다. 그런 다음 JSON.parse() 메서드를 사용하여 json 문자열을 구문 분석하고 obj의 속성에 액세스하여 배열의 데이터를 가져옵니다.

JSON 문자열에 작은따옴표, 큰따옴표 등의 특수 문자가 포함되어 있으면 JS 코드 오류가 발생할 수 있다는 점에 유의하세요. 이를 방지하려면 JSON 문자열에 이스케이프 문자를 사용해야 합니다.

  1. AJAX를 사용하여 JSON 데이터 가져오기

JSON 데이터를 서버에서 동적으로 가져와야 하는 경우 AJAX(Asynchronous JavaScript and XML) 기술을 사용할 수 있습니다. AJAX는 페이지를 새로 고치지 않고도 서버에 요청을 보내고 데이터를 얻은 다음 페이지에 데이터를 표시할 수 있습니다.

다음은 AJAX를 사용하여 JSON 데이터를 가져오는 샘플 코드입니다.

<?php
$array = array(
    &#39;name&#39; => '张三',
    'age' => 25,
    'interests' => array('篮球', '游泳', '音乐')
);
$json = json_encode($array);
?>
<script type="text/javascript">
//创建XMLHttpRequest对象
var xhr;
if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();  //IE7+、Firefox、Chrome、Opera、Safari
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");  //IE6、IE5
}

//发送AJAX请求
xhr.open('GET', 'get_json.php');
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        var json = xhr.responseText;
        var obj = JSON.parse(json);
        console.log(obj.name);          //输出:张三
        console.log(obj.age);           //输出:25
        console.log(obj.interests[0]);  //输出:篮球
    }
}
xhr.send();
</script>
로그인 후 복사

위 코드에서는 XMLHttpRequest 개체를 사용하여 AJAX 요청을 생성합니다. 그런 다음 open() 메소드를 호출하여 요청 연결을 열고 요청 메소드를 GET으로 설정하고 요청된 URL을 get_json.php로 설정합니다. 다음으로 AJAX 요청 상태가 변경될 때 반환된 데이터를 처리하도록 onreadystatechange 이벤트 처리 함수를 설정합니다. 마지막으로 send() 메서드를 호출하여 AJAX 요청을 보냈습니다.

AJAX 요청을 사용할 때 요청한 URL이 올바른지, 서버가 요청 매개변수를 올바르게 구문 분석하고 데이터를 JSON 형식으로 반환할 수 있는지 확인해야 합니다.

4. 요약

웹 애플리케이션 개발에서는 복잡한 데이터 구조(예: 배열)를 PHP에서 JS로 전달해야 하는 경우가 많습니다. 이 목표를 달성하기 위해 PHP 배열을 JSON 형식으로 변환한 다음 JS에서 JSON 데이터를 구문 분석할 수 있습니다. 여기서는 JSON 데이터를 전달하는 두 가지 방법, 즉 JSON 문자열을 JS 변수로 직접 사용하거나 AJAX 기술을 사용하여 서버에서 JSON 데이터를 얻는 방법을 소개합니다. 실제 개발에서는 효율적인 데이터 전송을 달성하기 위해 특정 상황에 따라 적절한 방법을 선택해야 합니다.

위 내용은 PHP를 사용하여 JS에 배열을 전달하고 데이터를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿