Передача HTML-элемента в PHP через $ .post () возвращает объект JavaScript или разрывы: как мне его кодировать? - PullRequest
Новая
       2

Передача HTML-элемента в PHP через $ .post () возвращает объект JavaScript или разрывы: как мне его кодировать?

1 голос
/ 01 февраля 2012

Я относительный новичок в JavaScript / jQuery.

Я работаю над экспортом (в файл на сервере) динамически сгенерированного <svg> из динамически сгенерированного <iframe>. Мне удалось извлечь соответствующие данные с помощью jQuery (то есть, я могу создать объект, содержимое которого равно <svg>...</svg>

Соответствующий фрагмент моего JavaScript синтаксического анализатора: 

<script type="text/javascript">
function chart_export(svg_id) {
    var svg_data = $('iframe:first').contents().find('svg');
    svg_data = svg_data[0]; // Unwrap the [], only one element.
    console.log(svg_data); // Looks right (but perhaps it's not).
    console.log(svg_id); // Also right

    // POST svg
    $.post("chart_export.php", {'svg_post' : svg_data, 'chart_name' : svg_id}, function(data){
        alert(data); // Quick view of $_POST, no var_dump();
    });
}
</script>

Соответствующий фрагмент моего PHP синтаксического анализатора: 

  <?php
  $path = "module/" . "post.txt";
  $svg_data = $_POST['svg_post'];
  file_put_contents($path, $svg_data); // Same output as below
  echo json_encode($_POST); // Hack return to JS's alert() callback.
  ?>

на данный момент заменено просто echo json_encode($_POST);

Если я не разверну объект svg_data, PHP получит его как (JavaScript?) [object Object], который я не могу перебрать в PHP (например, с $svg = $_POST['svg_data'];, который снова возвращает [object Object].

Если я разверну svg_data в JavaScript перед тем, как отправить его в PHP (как в примере кода выше), я получу [object SVGSVGElement].

Я поймал исправление, найденное в Объект jQuery в строку и Отправка пар значений из jQuery в файл php и сохранение данных в базе данных , но не полагаю, что они применимы к моей ситуации (несмотря на комментарий Cipi). Я также попытался var svg_string = new String('svg_data'); безрезультатно (это создает строку "[object Object]".

Ясно, что мое понимание объектов данных JavaScript и селекторов jQuery требует улучшения.

Что мне нужно сделать, либо в JavaScript / jQuery, либо в PHP, чтобы позволить мне получить доступ к необработанному содержимому всего <svg>...</svg>? Я думаю, это просто, и я скучаю по нему.

А вот образец SVG просто для примера: 

<svg id="chart" width="1292" height="636"><defs id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_0"><rect x="214" y="122" width="865" height="393"></rect></clipPath></defs><g><text text-anchor="start" x="214" y="91.5" font-family="Arial" font-size="30" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Test</text></g><g><g><text text-anchor="start" x="1127" y="139" font-family="Arial" font-size="20" stroke="none" stroke-width="0" fill="#000000">5</text></g><rect x="1099" y="122" width="20" height="20" stroke="none" stroke-width="0" fill="#64a8d1"></rect><g><text text-anchor="start" x="1127" y="171" font-family="Arial" font-size="20" stroke="none" stroke-width="0" fill="#000000">4</text></g><rect x="1099" y="154" width="20" height="20" stroke="none" stroke-width="0" fill="#3d9ad1"></rect><g><text text-anchor="start" x="1127" y="203" font-family="Arial" font-size="20" stroke="none" stroke-width="0" fill="#000000">3</text></g><rect x="1099" y="186" width="20" height="20" stroke="none" stroke-width="0" fill="#03436a"></rect><g><text text-anchor="start" x="1127" y="235" font-family="Arial" font-size="20" stroke="none" stroke-width="0" fill="#000000">2</text></g><rect x="1099" y="218" width="20" height="20" stroke="none" stroke-width="0" fill="#245a7a"></rect><g><text text-anchor="start" x="1127" y="267" font-family="Arial" font-size="20" stroke="none" stroke-width="0" fill="#000000">1</text></g><rect x="1099" y="250" width="20" height="20" stroke="none" stroke-width="0" fill="#0969a2"></rect></g><g><rect x="214" y="122" width="865" height="393" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(#_ABSTRACT_RENDERER_ID_0)"><g><rect x="214" y="514" width="865" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="214" y="416" width="865" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="214" y="318" width="865" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="214" y="220" width="865" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="214" y="122" width="865" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect></g><g><g><rect x="270" y="319" width="177" height="195" stroke="none" stroke-width="0" fill="#0969a2"></rect><rect x="269.5" y="318.5" width="178" height="196" stroke="#000000" stroke-width="1" stroke-opacity="0.3" fill-opacity="1" fill="none"></rect><rect x="268.5" y="317.5" width="180" height="198" stroke="#000000" stroke-width="1" stroke-opacity="0.15" fill-opacity="1" fill="none"></rect><rect x="267.5" y="316.5" width="182" height="200" stroke="#000000" stroke-width="1" stroke-opacity="0.05" fill-opacity="1" fill="none"></rect></g><rect x="558" y="319" width="177" height="195" stroke="none" stroke-width="0" fill="#0969a2"></rect><rect x="846" y="319" width="177" height="195" stroke="none" stroke-width="0" fill="#0969a2"></rect><rect x="270" y="123" width="177" height="195" stroke="none" stroke-width="0" fill="#245a7a"></rect><rect x="558" y="123" width="177" height="195" stroke="none" stroke-width="0" fill="#245a7a"></rect><rect x="846" y="123" width="177" height="195" stroke="none" stroke-width="0" fill="#245a7a"></rect><rect x="270" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#03436a"></rect><rect x="558" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#03436a"></rect><rect x="846" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#03436a"></rect><rect x="270" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#3d9ad1"></rect><rect x="558" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#3d9ad1"></rect><rect x="846" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#3d9ad1"></rect><rect x="270" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#64a8d1"></rect><rect x="558" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#64a8d1"></rect><rect x="846" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#64a8d1"></rect></g><g><rect x="214" y="514" width="865" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g></g><g></g><g><g><text text-anchor="middle" x="358.5" y="538.6" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#222222">One</text></g><g><text text-anchor="middle" x="646.5" y="538.6" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#222222">Two</text></g><g><text text-anchor="middle" x="934.5" y="538.6" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#222222">Three</text></g><g><text text-anchor="end" x="198" y="520.1" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#444444">0.0</text></g><g><text text-anchor="end" x="198" y="422.1" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#444444">0.5</text></g><g><text text-anchor="end" x="198" y="324.1" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#444444">1.0</text></g><g><text text-anchor="end" x="198" y="226.1" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#444444">1.5</text></g><g><text text-anchor="end" x="198" y="128.1" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#444444">2.0</text></g></g></g><g><g><path d="M438.5,303.5A1,1,0,0,1,437.5,302.5L437.5,247.5A1,1,0,0,1,438.5,246.5L488.5,246.5A1,1,0,0,1,489.5,247.5L489.5,302.5A1,1,0,0,1,488.5,303.5L479.5,303.5L447.5,319.5L463.5,303.5Z" stroke="none" stroke-width="0" fill-opacity="0.4" fill="#cccccc" transform="translate(2, 2)"></path><path d="M438.5,303.5A1,1,0,0,1,437.5,302.5L437.5,247.5A1,1,0,0,1,438.5,246.5L488.5,246.5A1,1,0,0,1,489.5,247.5L489.5,302.5A1,1,0,0,1,488.5,303.5L479.5,303.5L447.5,319.5L463.5,303.5Z" stroke="none" stroke-width="0" fill-opacity="0.6" fill="#cccccc" transform="translate(1, 1)"></path><path d="M438.5,303.5A1,1,0,0,1,437.5,302.5L437.5,247.5A1,1,0,0,1,438.5,246.5L488.5,246.5A1,1,0,0,1,489.5,247.5L489.5,302.5A1,1,0,0,1,488.5,303.5L479.5,303.5L447.5,319.5L463.5,303.5Z" stroke="#cccccc" stroke-width="1" fill="#ffffff" transform="translate(0, 0)"></path><text text-anchor="start" x="447" y="269.6" font-family="Arial" font-size="16" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">One</text><text text-anchor="start" x="447" y="290.6" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#000000">1:</text><text text-anchor="start" x="465" y="290.6" font-family="Arial" font-size="16" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">1</text></g></g></svg>

Ответы [ 2 ]

1 голос
/ 01 февраля 2012

Ваша проблема заключается в том, что вы не получаете реальную структуру HTML элемента <svg/>, поэтому вы получили [object SVGSVGElement] и [object SVGSVGElement] в качестве его строк представления.Вы должны сделать что-то вроде 

$("<div/>").html(svg_data).html()

, чтобы получить строку с HTML-содержимым элемента.Я не уверен, есть ли другой способ сделать это, но я думаю, что это подойдет.

0 голосов
/ 01 февраля 2012

Используйте функцию escape javascript, чтобы сделать ее переносимой. У меня есть личные предпочтения для кодирования JSON при обмене данными между JavaScript и PHP.

Вот ссылка для побега:

http://www.w3schools.com/jsref/jsref_escape.asp

и это для кодировки JSON:

http://www.openjs.com/scripts/data/json_encode.php

Удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...