请求Ajax成功后刷新表答案

【问题标题】：Refresh table after request Ajax is success请求Ajax成功后刷新表
【发布时间】：2021-04-22 16:02:00
【问题描述】：

我是 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>

有什么想法吗？

【问题讨论】：

成功的 AJAX 请求不会神奇地刷新 DOM。您需要获取response 的内容并编写代码来更新您的表格内容。
是的，这是我的问题，我不知道如何用新数据刷新 DOM。我记得我正在发现所有这些概念。

标签： php jquery ajax symfony

【解决方案1】：

根据您的问题和 cmets，您的问题与 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

示例：

$('#my-table').append(response.myWhatever);

【讨论】：

谢谢，我会仔细看的！