Question

我是 Ajax 的初学者。当用户在表单选择过滤器中选择一个选项时，我尝试刷新表格。我使用 Symfony 和 Twig。

当我选择一个新过滤器时，我在控制台中获得了 Json 格式的新数据，但表格没有显示新数据。请求ajax成功时，没找到解决办法。

我的选择过滤器：

    {{ form_start(form) }}
    <div class="container-fluid">
        <div class="row">
            <div class="col-fluid">
                {{ form_row(form.isAttending) }}
            </div>
            <button type="submit" class="btn btn-outline-success mb-2">{{ button_label|default('Envoyer') }}</button>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-1-fluid">
                {{ form_row(form.active) }}
            </div>
        </div>
    </div>
    {{ form_end(form) }}

在我的控制器中：

 /**
     * @Route("/ajax", methods={"GET", "POST"})
     */
    public function testAjax(Request $request)
    {
        if (!$request->isXmlHttpRequest()) {
            return new JsonResponse(array(
                'status' => 'Error',
                'message' => 'Error'),
                400);
        }

        if($request->request->has('isAttending')) {
            $preSelect = $request->request->get('isAttending');
            return new JsonResponse(
                $this->queryFollowingFilter($preSelect),
                200);
        }
    }

在我的模板中：

    <script>
        $(document).on('change', '#campagnes_tel_isAttending', function () {
            $('#flash').remove();
            let $field = $(this)
            let $preselect = $('#campagnes_tel_isAttending')
            let $form = $field.closest('form')
            let data = {}
            data['isAttending'] = $field.val()
            console.log(data)
            $.ajax({
                type: "POST",
                url: "/campagnestel/ajax",
                data: data,
                dataType: "json",
                success: function(response) {
                    console.log(response);
                }
            });
        });
    </script>

有什么想法吗？

Answer 1

根据您的问题和评论，您的问题与 Symfony、Ajax 和 Twig 无关。您获得了正确的数据，但您只是不知道如何操作 DOM。 DOM 操作是 JavaScript 的一项基本功能。

在这里你可以学习如何操作 DOM：https://www.w3schools.com/js/js_htmldom.asp

在这里您可以学习如何使用您显然正在使用的 jQuery 轻松操作它：https://www.w3schools.com/js/js_jquery_dom.asp

示例：

{{1}}

请求 Ajax 成功后刷新表

1 个答案: