通过 $.post() 将 HTML 元素传递给 PHP 会返回 JavaScript 对象或中断:我必须如何编码它


Passing an HTML element to PHP via $.post() returns JavaScript object or breaks: how must I encode it?

我是一个相对JavaScript/jQuery新手。

我正在从动态生成的<iframe>中导出(到服务器上的文件(动态生成的<svg>。我已经成功地用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发布到 PHP 之前在 JavaScript 中解包(如上面的示例代码所示(,我会[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>

你的问题是没有获得<svg/>元素的真实HTML结构,这就是为什么你得到[object SVGSVGElement][object SVGSVGElement]作为它的表示字符串的原因。你应该做类似的事情

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

以获取包含元素的 HTML 内容的字符串。我不确定是否有其他方法可以做到这一点,但我认为这会很好。

使用 javascript 的 escape 函数使其可移植。在javascript和PHP之间进行通信时,我个人更喜欢json编码。

以下是逃生的参考:

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

这个用于 JSON 编码:

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

祝你好运!