Question

我想通过点击链接显示带有jquery的数据。这是代码，但它缺少一些代码jquery来浏览数据和代码twig来显示它们。

这是Twig：

<a href  class="list">List</a>

<div id="travels">

  // display data here

</div>

<script>
    $(document).ready(function () {
        $(".list").click(function () {

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: Routing.generate('travel_list_ajax'),
                success: function () {
                   // rest of code

                }
            });
            return false;
        });
    });
</script>

动作

public function listAjaxAction(Request $request)
{
    if ($request->isXmlHttpRequest()) {

        $em = $this->getDoctrine()->getManager();

        $travels = $em->getRepository('AppBundle:Travel')->findAll();

        $response = new JsonResponse();

        return $response->setData(array('travels'=>$travels));
    }
    return null;

}

Answer 1

如果您尝试使用Ajax将数据加载到twig模板中，则可以返回Ajax调用的整个HTML标记，然后插入DOM。步骤如下。 1.在模板中，指定要在其中显示数据的div。我假设您需要显示列表。 2.通过Ajax调用获取列表的标记。 3.使用jquery将Ajax调用返回的html插入1中的div。

例如，在这里，我尝试在我的用户列表上进行搜索，然后相应地更改表中的数据。我正在根据搜索框中的文本替换id为user-list-div的div中的表标记。

Javascript部分：

<script>
            $(function(){
                console.log('desperate for');

                var searchField = $('#search-field');
                var userListDiv = $('#user-list-div');

                searchField.keyup(function(evt){
                    $.ajax({
                        url: '{{ path('admin_user_search') }}',
                        method: "POST",
                        data: "id=" + $(this).val() ,
                        dataType: 'html',
                        success: function(result, request) {

                          var parsedData =JSON.parse(result);
                            console.log(parsedData);
                            if(parsedData.status ==='success'){
                                console.log('hete');
                                userListDiv.empty();
                                userListDiv.html(parsedData.data);
                            }else{
                                //handle no result case
                            }
                        }
                    });
                });
            });
        </script>

控制器操作

public function searchuserAction(){
        $em = $this->getDoctrine()->getManager();
        $request = $this->get('request');

        $searchParameter = $request->request->get('id');

        //call repository function

        $entities = $em->getRepository('LBCoreBundle:User')->findUsersForname($searchParameter);
        $status = 'error';
        $html = '';
        if($entities){
       //get the HTML markup corresponding to the table
            $data = $this->render('LBCoreBundle:User:ajax_template.html.twig', array(
                'entities' => $entities,
            ));
            $status = 'success';
            $html = $data->getContent();
        }


        $jsonArray = array(
            'status' => $status,
            'data' => $html,
        );

        $response = new Response(json_encode($jsonArray));
        $response->headers->set('Content-Type', 'application/json; charset=utf-8');

        return $response;
    }

使用ajax和Symfony2显示数据

1 个答案: