自定义表单AJAX提交至控制器：页面不跳转及组件疑问求助

一、前端表单调整 #

• 给表单添加唯一ID，示例：<form id="custom-form" action="/your-submit-route" method="POST">
• 新增提示容器用于显示提交结果：<div id="form-feedback" style="display: none; padding: 10px; margin-top: 10px;"></div>

二、AJAX提交逻辑（原生JS） #

document.getElementById('custom-form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认页面跳转
    const form = this;
    const feedbackEl = document.getElementById('form-feedback');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    const formData = new FormData(form);

    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-Token': csrfToken
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            feedbackEl.textContent = '提交成功！';
            feedbackEl.style.backgroundColor = '#d4edda';
            feedbackEl.style.color = '#155724';
            form.reset();
        } else {
            feedbackEl.textContent = data.error || '提交失败，请重试';
            feedbackEl.style.backgroundColor = '#f8d7da';
            feedbackEl.style.color = '#721c24';
        }
        feedbackEl.style.display = 'block';
        // 3秒后自动隐藏提示
        setTimeout(() => feedbackEl.style.display = 'none', 3000);
    })
    .catch(err => {
        feedbackEl.textContent = '网络异常，请稍后再试';
        feedbackEl.style.backgroundColor = '#f8d7da';
        feedbackEl.style.color = '#721c24';
        feedbackEl.style.display = 'block';
    });
});

三、后端控制器改造 #

修改原有控制器，返回JSON响应替代页面跳转：

use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;

public function handleFormSubmit(Request $request)
{
    // 保留原参数获取逻辑
    $fieldValue = $request->request->get('fieldName');

    // 执行表单业务逻辑（数据存储、验证等）
    $isSuccess = true; // 根据实际处理结果赋值
    $errorMsg = '';

    if ($isSuccess) {
        return new JsonResponse([
            'success' => true,
            'message' => '操作完成'
        ]);
    } else {
        return new JsonResponse([
            'success' => false,
            'error' => $errorMsg
        ], 400);
    }
}

关键注意点 #

• 确认前端请求的路由与控制器路由匹配，可通过Shopware路由配置工具验证
• 必须携带CSRF令牌，Shopware Storefront默认在页面<meta name="csrf-token">标签中
• 若使用Shopware主题开发，建议将JS代码放入主题的src/js目录下，通过主题构建流程引入

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