使用 jquery 将数据发布到下载 svg 文件的 php 文件答案

【问题标题】：Post data with jquery to php file that downloads svg file使用 jquery 将数据发布到下载 svg 文件的 php 文件
【发布时间】：2014-01-10 08:43:56
【问题描述】：

我遇到了一个代码问题，该代码应该生成一个 svg 文件以供下载，而不是在服务器本身上保存一个。我已经设法下载了包含一些代码的文件，但不是实际的 $data 本身。

所以，去掉不必要的东西，html按钮启动javascript...

<button type="button" onclick="toSVG()">Save SVG</button>

将准备好的数据发布到 php 文件...

var data = $svgDiv.html();
$.post('./saveSVG.php', 
        {'data': data},
        function(data){ 
            window.location = 'saveSVG.php';
        }
);

应该将 diagram.svg 保存到硬盘..

<?php
$data = $_POST['data'];
$file = "diagram.svg";

header('Content-type: image/svg+xml');
header("Content-Disposition: attachment; filename=$file");

echo('<?xml version="1.0" encoding="iso-8859-1"?>' . "\n"); 
echo('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">' . "\n");  
echo $data; ?>

但下载的 diagram.svg 只包含前两个回显，并且 $data 为空。

在浏览器的“网络访问”窗口中，我注意到 saveSVG.php 出现了两次，并且在 POST 方法中，状态设置为 OK 并且 $data 正确回显，而在 GET 中，状态设置为“已取消”，即使我'刚刚下载了文件（带有空的 $data ofc..）

我只是不明白 :) 有人可以帮我理解为什么这不起作用吗？

【问题讨论】：

标签： php jquery svg

【解决方案1】：

首先，您对 saveSVG.php 使用发布数据进行发布调用：

$.post('./saveSVG.php', 
    {'data': data},

在该请求返回您想要的响应（function(data){ 中的data）之后，您将重定向到 saveSVG.php 没有发布数据：window.location = 'saveSVG.php';

所以第二次调用，你的实际下载，是空的。

试试这个方法（根本不用 $.post）：

window.location = 'saveSVG.php?data=' + $svgDiv.html();

在你的 php 中：

$data = $_GET['data'];

【讨论】：

谢谢！看起来它会起作用..总有一天。我不得不删除 .serialize() 方法，因为我试图在我的 $data 中发送原始 svg 标签，并且在渲染下载的文件时有时会出错。我需要确定问题出在我的 svg 标签上还是因为删除了 .serialize() 方法。为什么你首先添加它？
不，serialize() 一开始就是不正确的。我删除了它。 ;) 如果您无法弄清楚，您剩下的问题应该在另一个问题中发布。
昨天想了想，今天查了一下……我用GET方法创建的url超出服务器限制怎么办？
嗯，那么您可能必须使用 post（或设置限制，但我认为这不是一个好主意）。我会为 svg 数据使用一个表单，然后通过 jquery 提交它。您可以发布包含 svg 数据的 html 部分吗？
实际上它是由用户通过某种编辑器生成的，所以我只能发布一个示例，但它们只是原始的 svg 标签。当我使用少量对象时，一切正常，直到我的图表变得有点复杂。我希望它们非常大，所以发布将是唯一的方法，我需要使用一个文本字段。可以帮助我如何实现这一目标吗？我昨天已经看到了这个想法，但我无法让它发挥作用..

【解决方案2】：

我在一个类似的问题上苦苦挣扎。上述解决方案中的 GET 方法适用于小数据，但不适用于我的全尺寸数据。更改为 OP 中的 JQuery AJAX .post() 给了我与 OP 完全相同的问题 - 服务器端 php 代码正在运行，但没有给我保存的文件。我终于意识到 AJAX 正是我在这种情况下不想要的。

我的解决方案是一个简单的表单，带有一个隐藏字段来包含要发布的数据。页面加载时隐藏输入的值为“0”，但在 onsubmit 事件中由 javascript 代码替换为 SVG 数据。
这是表格：

<form name="myform" method="post" action="save_php.php" onsubmit="DoSubmit();">
<input type="hidden" name="post_data" value="0" />
<input type="submit" name="submit" value="Save SVG"/>
</form>

在我的页面上，我想要复制的 SVG 代码显示在 <div> 和 id="live_svg" 中。这是在 onsubmit 事件中将代码添加到隐藏输入值的 javascript 代码：

<script>
// Submit the form with post data
function DoSubmit(){
  document.myform.post_data.value = $('#live_svg').html();
  return true;
}
</script>

最后，服务器端 PHP 只是读取 $_POST，并设置内容头以输出准备保存的文件：

<?php
$data = $_POST["post_data"];
$file = "diagram.svg";

header('Content-type: image/svg+xml');
header("Content-Disposition: attachment; filename=$file");

echo('<?xml version="1.0" encoding="iso-8859-1"?>' . "\n"); 
echo('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">' . "\n");  
echo $data;
?>

我很尴尬地承认这花了我多长时间才弄清楚！但是如果没有 OP 和上面的答案，我就无法做到这一点。谢谢！

【讨论】：