如何用jQuery Ajax验证日期重复并修改Symfony控制器实现数据库查重

1. 改造控制器的createProperty方法 #

在原有方法中添加Ajax校验分支，处理前端传来的日期参数并查询数据库：

// src/Controller/PropertyController.php
use Symfony\Component\HttpFoundation\JsonResponse;
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

// ...

public function createProperty(Request $request, EntityManagerInterface $em): Response
{
    $property = new Property();
    $form = $this->createForm(PropertyType::class, $property);
    $form->handleRequest($request);

    // 处理Ajax日期校验请求
    if ($request->isXmlHttpRequest() && $request->query->has('startDate') && $request->query->has('endDate')) {
        // 解析并验证日期格式（根据前端实际格式调整，这里假设为Y-m-d）
        $startDate = \DateTime::createFromFormat('Y-m-d', $request->query->get('startDate'));
        $endDate = \DateTime::createFromFormat('Y-m-d', $request->query->get('endDate'));

        if (!$startDate || !$endDate) {
            return new JsonResponse(['exists' => false, 'error' => '无效的日期格式'], 400);
        }

        // 查询数据库中是否存在相同的startDate和endDate组合
        $existing = $em->getRepository(Property::class)->findOneBy([
            'startDate' => $startDate,
            'endDate' => $endDate,
        ]);

        // 返回JSON结果告知前端是否存在
        return new JsonResponse(['exists' => $existing !== null]);
    }

    // 原有表单提交逻辑保持不变
    if ($form->isSubmitted() && $form->isValid()) {
        $em->persist($property);
        $em->flush();

        return $this->redirectToRoute('property_index');
    }

    return $this->render('property/new.html.twig', [
        'property' => $property,
        'form' => $form->createView(),
    ]);
}

2. 确保路由支持GET请求 #

修改路由配置，允许GET请求以适配Ajax校验：

# config/routes.yaml
property_create:
    path: /property/new
    controller: App\Controller\PropertyController::createProperty
    methods: [GET, POST]

3. 前端添加Ajax校验与模态框逻辑 #

在Twig视图中拦截提交事件，先发起Ajax校验，再根据结果处理：

{# templates/property/new.html.twig #}
{% extends 'base.html.twig' %}

{% block body %}
    <h1>创建Property</h1>

    {{ form_start(form) }}
        {{ form_widget(form) }}
        <button type="button" id="submit-property">提交</button>
    {{ form_end(form) }}

    <!-- 日期重复提示模态框 -->
    <div class="modal" id="date-duplicate-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>所选的日期组合已存在，请重新选择！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const submitBtn = document.getElementById('submit-property');
            const form = document.querySelector('form');
            const startDateInput = document.getElementById('property_startDate'); // 替换为你的实际字段ID
            const endDateInput = document.getElementById('property_endDate'); // 替换为你的实际字段ID
            const modal = new bootstrap.Modal(document.getElementById('date-duplicate-modal'));

            submitBtn.addEventListener('click', function(e) {
                e.preventDefault();

                const startDate = startDateInput.value;
                const endDate = endDateInput.value;

                // 发起Ajax请求
                fetch('{{ path('property_create') }}?' + new URLSearchParams({
                    startDate: startDate,
                    endDate: endDate
                }))
                .then(response => response.json())
                .then(data => {
                    if (data.exists) {
                        // 弹出提示模态框
                        modal.show();
                    } else {
                        // 日期合法，提交表单
                        form.submit();
                    }
                })
                .catch(err => {
                    alert('日期校验失败，请稍后重试');
                });
            });
        });
    </script>
{% endblock %}

关键注意点 #

• 替换代码中的字段ID：property_startDate和property_endDate要与表单生成的实际ID一致，可通过浏览器审查元素查看
• 日期格式要前后端统一：如果前端使用其他格式（如d/m/Y），需修改控制器中createFromFormat的参数
• 若需校验日期重叠而非完全相等，可修改Repository查询逻辑，使用DQL编写日期范围匹配条件

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