请求Ajax成功后刷新表

Posted 2023-02-16

【中文标题】请求Ajax成功后刷新表

【英文标题】：Refresh table after request Ajax is success

【发布时间】：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。我记得我正在发现所有这些概念。

【参考方案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);

【讨论】：

谢谢，我会仔细看的！