如何通过Ajax将视图中编辑后的JSON数据传递至控制器？

没问题！我来一步步帮你搞定这个需求，其实Ajax传递数据的流程很清晰，咱们分几个部分来实现：

1. 完善Twig视图（添加按钮、传递数据到JS、准备CSRF令牌） #

首先你需要在视图里添加一个保存按钮，把初始JSON传递给JavaScript，还要准备好Symfony要求的CSRF令牌（防止跨站请求伪造）。修改后的Twig代码如下：

{% extends 'default/index.html.twig' %}
{% block content %}
<div class="json-view">
    <!-- 可编辑表格将渲染在这里 -->
</div>
<button id="saveJsonBtn" class="btn btn-primary mt-3">保存修改</button>
{% endblock %}

{% block javascripts %}
<script>
// 将Twig中的初始JSON转换为JavaScript变量（确保用raw避免转义）
const initialJson = {{ initialJson|json_encode|raw }};
// 获取CSRF令牌，Ajax请求必须携带这个
const csrfToken = '{{ csrf_token("save_json_action") }}';

// 你的现有函数：将JSON转为可编辑表格
function jsonToTable(json, opts={}) {
    let headers = Object.keys(json[0]);
    let table = document.createElement('table');
    let thead = document.createElement('thead');
    let tbody = document.createElement('tbody');
    let thead_tr = document.createElement('tr');
    
    if (opts.class) table.classList.add(opts.class);
    
    headers.forEach(header => {
        let th = document.createElement('th');
        th.textContent = header;
        thead_tr.appendChild(th);
    });
    
    json.forEach(record => {
        let tr = document.createElement('tr');
        headers.forEach(field => {
            let td = document.createElement('td');
            td.textContent = record[field];
            td.setAttribute('contenteditable', true);
            tr.appendChild(td);
        });
        tbody.append(tr);
    });
    
    thead.appendChild(thead_tr);
    table.appendChild(thead);
    table.appendChild(tbody);
    return table;
}

// 你的现有函数：将表格转回JSON
function tableToJson(table, options={}) {
    let fields = Array.from(table.querySelectorAll('thead tr th')).map(th => th.textContent);
    return Array.from(table.querySelectorAll('tbody tr')).map(tr => {
        return Array.from(tr.querySelectorAll('td')).reduce((record, td, index) => {
            return Object.assign(record, { [fields[index]] : formatValue(td.textContent) });
        }, {});
    });
}

// 补充formatValue函数（用于转换表格单元格的值类型，比如字符串转数字）
function formatValue(value) {
    // 根据你的字段需求调整，比如数字字段转成Number类型
    if (!isNaN(value) && value.trim() !== '') {
        return parseFloat(value);
    }
    return value.trim();
}

// 初始化渲染可编辑表格
const container = document.querySelector('.json-view');
const editableTable = jsonToTable(initialJson, { class: 'table table-bordered' });
container.appendChild(editableTable);

// 保存按钮的点击事件逻辑
document.getElementById('saveJsonBtn').addEventListener('click', async () => {
    // 把编辑后的表格转成JSON
    const updatedJson = tableToJson(editableTable);
    
    try {
        // 用fetch发送Ajax请求到控制器
        const response = await fetch('{{ path("save_json_data") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': csrfToken // 携带CSRF令牌
            },
            body: JSON.stringify(updatedJson) // 将JSON转为字符串发送
        });
        
        if (response.ok) {
            const result = await response.json();
            alert('数据保存成功！');
            // 这里可以添加其他操作，比如刷新页面或者更新视图
        } else {
            const errorMsg = await response.text();
            alert(`保存失败：${errorMsg}`);
        }
    } catch (err) {
        console.error('请求出错:', err);
        alert('请求异常，请稍后重试');
    }
});
</script>
{% endblock %}

注意：你需要在渲染这个视图的控制器里，把初始JSON作为initialJson变量传递过来，比如：

return $this->render('your_template.html.twig', [
    'initialJson' => $yourInitialJsonArray,
]);

2. 编写Symfony控制器处理请求 #

接下来创建一个控制器方法，接收Ajax发送的JSON数据，处理后存入数据库：

// src/Controller/JsonDataController.php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Routing\Annotation\Route;

class JsonDataController extends AbstractController
{
    /**
     * @Route("/save-json-data", name="save_json_data", methods={"POST"})
     */
    public function saveJson(Request $request)
    {
        // 验证请求是否为JSON格式
        if (!$request->isJson()) {
            return new JsonResponse(['error' => '请求格式错误，需要JSON'], 400);
        }
        
        // 解析请求中的JSON数据为数组
        $updatedData = $request->toArray();
        
        // --------------------------
        // 这里编写你的数据库操作逻辑
        // 示例（假设你用Doctrine操作实体）：
        // $em = $this->getDoctrine()->getManager();
        // foreach ($updatedData as $item) {
        //     // 根据业务逻辑更新或创建实体
        //     $entity = $em->getRepository(YourEntity::class)->findOneBy(['a' => $item['a']]);
        //     if (!$entity) {
        //         $entity = new YourEntity();
        //     }
        //     $entity->setB($item['b']);
        //     $entity->setC($item['c']);
        //     // ... 设置其他字段
        //     $em->persist($entity);
        // }
        // $em->flush();
        // --------------------------
        
        // 返回成功响应
        return new JsonResponse([
            'success' => true,
            'message' => '数据已成功保存到数据库'
        ]);
    }
}

3. 关键注意事项 #

• 数据验证：一定要对接收的$updatedData做合法性验证，比如检查字段类型、取值范围，避免错误或恶意数据存入数据库。可以使用Symfony的Validator组件来实现验证逻辑。
• 异常处理：在数据库操作部分添加try-catch块，捕获Doctrine或其他异常，返回友好的错误响应给前端。
• 样式适配：示例中给表格添加了Bootstrap的table table-bordered类，如果你不用Bootstrap，可以替换成自己的样式类，或者直接去掉。
• formatValue函数：这个函数用来转换表格单元格的文本值到合适的类型，比如把字符串转成数字，你可以根据实际字段需求调整它的逻辑。

这样整个流程就完整了：用户编辑表格后点击保存，JavaScript将表格转为JSON，通过Ajax发送到控制器，控制器处理数据并存入数据库，最后返回响应给前端提示结果。

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