如何用AJAX将SVG字符串以指定文件名发送到服务器生成SVG文件

原代码问题分析 #

• PHP端使用json_decode(file_get_contents('php://input'))时，默认返回对象类型，但原代码用数组下标$data['svgData']访问会直接报错，导致文件无法创建。
• 文件名缺少.svg后缀，即使保存成功也不是标准SVG文件。
• 前端AJAX指定dataType: "json"，但后端未返回JSON格式数据，会触发请求异常（虽控制台打印success，但实际请求状态可能错误）。

修改后的前端代码 #

let svgData = '<svg width="300px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="carrot" viewBox="0 0 50 50"><path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" /></symbol><pattern id="myPat" patternUnits="userSpaceOnUse" width="88" height="88" ><use xlink:href="#carrot" width="30" height="30" fill="orange" transform="rotate(80 45 25) translate(20 0)"></use><use xlink:href="#carrot" width="60" height="60" fill="blue" transform="rotate(50 65 25) translate(40 0)"></use></pattern><rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)"> </rect></svg>'

let filename = "mySVG.svg" // 补上.svg后缀

// 在页面展示SVG
let container = document.getElementById("container");
document.body.appendChild(container)
container.innerHTML = svgData;

// 绑定按钮点击事件
document.getElementById('sendSVG').onclick = function (){
    sendSVG(svgData, filename)
}

// 发送SVG到服务器的核心函数
function sendSVG(svgData, filename){
  let obj = {
    svgData: svgData,
    filename: filename
  }
  
  $.ajax({
      url: 'svg_ajax.php',
      type: 'POST',
      data: JSON.stringify(obj),
      contentType: 'application/json',
      success: function (response) {
          console.log('保存成功:', response)
      },
      error: function(xhr, status, error) {
          console.error('保存失败:', error)
      }
  })
}

HTML部分保持不变：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<button id="sendSVG">Send SVG to Server</button>
<div id="container"></div>

修改后的后端PHP代码 #

<?php
    // 读取JSON数据并转为数组（第二个参数设为true）
    $data = json_decode(file_get_contents('php://input'), true);
    
    // 校验必要参数是否存在
    if(isset($data['svgData']) && isset($data['filename'])){
        $svgData = $data['svgData'];
        $filename = $data['filename'];
        
        // 写入文件，需确保服务器目录有写入权限
        if(file_put_contents($filename, $svgData)){
            echo json_encode(['status' => 'success', 'message' => '文件已保存']);
        } else {
            echo json_encode(['status' => 'error', 'message' => '文件写入失败']);
        }
    } else {
        echo json_encode(['status' => 'error', 'message' => '缺少必要参数']);
    }
?>

额外注意事项 #

• 确保服务器目标目录拥有写入权限（可根据服务器配置调整为chmod 755或777）。
• SVG字符串中的特殊字符无需手动转义，JSON.stringify会自动处理。

内容的提问来源于stack exchange，提问作者Hesper