JSON 데이터를 php에서html-data 속성으로 전달한 후 Javascript로 전달

JSON 데이터를 php에서html-data 속성으로 전달한 후 Javascript로 전달

사용자가 커스텀 설정을 추가하는 플러그인을 만들고 있습니다.data-HTML 의 속성. 설정은 JSON 형식입니다.Javascript에서 이 설정을 사용하고 있습니다.

있다preview,base그리고.paths특성. preview그리고.base문자열 값이 있지만paths의 배열입니다.path물건들.

HTML에 직접 JSON 설정을 추가하면 정상적으로 동작합니다.

<div data-side="front" data-params='{"preview": "assets/img/products/tshirt/front-preview.png", "base": "assets/img/products/tshirt/front-base.png", "paths": "[{\"name\": \"base\", \"path\": \"M 324.00,33.00 C 324.00,33.00\", \"x\": 92, \"y\": 16, \"height\": 370}, {\"name\": \"collar\", \"path\": \"M 358.00,46.10 C 358.00,46.10\", \"x\": 170, \"y\": 17, \"height\": 21}, {\"name\": \"leftSleeve\", \"path\": \"M 633.17,170.00 C 633.17,170.00\", \"x\": 288, \"y\": 66, \"height\": 131}, {\"name\": \"leftCuff\", \"path\": \"M 595.00,438.00 C 615.47,438.23\", \"x\": 293, \"y\": 172, \"height\": 33}, {\"name\": \"rightSleeve\", \"path\": \"M 142.00,140.00 C 143.46,150.28\", \"x\": 47, \"y\": 64, \"height\": 131}, {\"name\": \"rightCuff\", \"path\": \"M 48.00,375.38 C 48.00,375.38 95.00\", \"x\": 41, \"y\": 166, \"height\": 36}]"}'>

이 값은 다음 방법으로 얻을 수 있습니다.data('Params')jQuery 메서드.그 타입은object.

이제, 내가 할 때json_encodephp 어레이를 사용하여data-, 정상적으로 추가되었습니다.

<div data-side="front" data-params=<?php echo "'".json_encode($dataParams)."'"; ?>>

하지만 지금은...data('Params')Javascript에서는stringJSON 해석 오류가 발생하였습니다.삭제하면pathskey 타입이 오브젝트로 바뀝니다.

여기 있습니다.print_r암호화하는 어레이:

Array
(
    [preview] => assets/img/products/tshirt/front-preview.png
    [base] => assets/img/products/tshirt/front-base.png
    [paths] => Array
        (
            [0] => Array
                (
                    [name] => base
                    [path] => M 324.00,33.00 C 324.00,33.00
                    [x] => 92
                    [y] => 16
                    [height] => 370
                )
                ... and more path arrays

        )

)

그럼 왜 타입이 스트링으로 변경되는 거죠?paths열쇠요? 해결할 방법이 있나요?

편집:

출력은 다음과 같습니다.

데이터를 이스케이프하고 특수 문자를 처리해야 합니다.

<div data-side="front" data-params="<?php echo htmlspecialchars(json_encode($dataParams), ENT_QUOTES, 'UTF-8'); ?>">

jQuery로 입수:

$('[data-side="front"]').data('params'); // object

또는 javascript

JSON.parse(document.querySelector('[data-side="front"]').dataset.params); // object

JSON_HEX_APOS 플래그를 사용하여 모든 기호를 \u0027로 변환할 수도 있습니다.

<div data-side="front" data-params="<?php echo json_encode($dataParams, JSON_HEX_APOS); ?>">

그런 다음 JavaScript를 사용하여 액세스합니다.

$('[data-side="front"]').data('params');

언급URL : https://stackoverflow.com/questions/32820601/passing-json-data-from-php-to-html-data-attribute-and-then-to-javascript