问题：

Question

嗨，大家好我在symfony项目工作，我想用ajax进行实时搜索。我试过但由于某种原因，它不能正常工作，从数据库返回所有数据，而不是我使用keyup搜索的数据。任何人都可以帮助我。这是我的代码

<div id="div">
    </div>

    <table border="1">
    <tr>
        <td>Id</td><td>Libelle</td><td>pays</td>
    </tr>
    {% for i in voitures %} 
            <tr>
            <td>{{ i.id}}</td>
            <td>{{ i.libelle}}</td>
            <td>{{ i.pays}}</td>

           </tr>
     {% endfor %}
    </table>
    {{ form_start(form) }}
    {{ form(form) }}
    {{ form_errors(form) }}
    {{ form_end(form) }}

     <script src="{{ asset('js/jquery.js') }}"></script>
     <script>
     $("#myapp_parcbundle_marque_libelle").keyup(
            function(){
                 var serie=$('#myapp_parcbundle_marque_libelle').val();
                var DATA = 'serie=' + serie;
                $.ajax({
                    type: "POST",
                    url: "{{ path('demo_create')}}",
                    data:DATA,
                    success: function (msg) {
                        $( "#div" ).html( msg );
                    }
                });
            });

</script>

控制器

function testAction(Request $request)
{
    $voiture = new Marque();
    $em = $this->getDoctrine()->getManager();
    $voitures=$em->getRepository('MyAppParcBundle:Marque')->findAll();
    $Form = $this->createForm(RechercheForm::class, $voiture);
    $Form->handleRequest($request);

    if($request->isXmlHttpRequest()&&($Form->isValid())){

        $voitures = $em->getRepository("MyAppParcBundle:Marque")
            ->findBy(array('serie'=>$voiture->getSerie()));
        return new JsonResponse($voitures);

    }
    return $this->render(
        'MyAppParcBundle:Marque:Recherche2.html.twig',
        array("voitures" => $voitures,
            "form" => $Form->createView()));

}

Answer 1

当您POST表单时，Symfony会为您填写数据。在AJAX中，您必须自己处理POST。

问题：

您使用$voiture = new Marque();代替serie; // sent by your $.ajax()。

您POST只向Symfony提供了一段数据，而不是整个表单，因此$form->handleRequest();（使用$voiture数据填充POST）无效。

// function testAction()
// ...
if ($request->isXmlHttpRequest() && $Form->isValid()) {
    $voitures = $em->getRepository("MyAppParcBundle:Marque")
        ->findBy(array(
            'serie' => $voiture->getSerie() // Not connected to the POST data.
        ));

    return new JsonResponse($voitures);
}

解决方案（你非常接近）：

从$request（more info）获取数据：

if ($request->isXmlHttpRequest()) {
    $voitures = $em->getRepository("MyAppParcBundle:Marque")
        ->findBySerie( // shorthand findBy(), it's optional.
            $request->get('serie')
        );

    return new JsonResponse($voitures);
}

Answer 2

所以我解决了我的控制器的问题：

function testAction(Request $request)
{
    $voiture = new Marque();
    $em = $this->getDoctrine()->getManager();
    $voitures=$em->getRepository('MyAppParcBundle:Marque')->findAll();
    $Form = $this->createForm(RechercheForm::class, $voiture);
    $Form->handleRequest($request);
    if($request->isXmlHttpRequest()){
        $serializer = new Serializer(array(new ObjectNormalizer()));
        $voitures=$em->getRepository('MyAppParcBundle:Marque')
            ->findBy(array('libelle'=>$request->get('libelle')));
        $data = $serializer->normalize($voitures);
        return new JsonResponse($data);
    }
    return $this->render(
        'MyAppParcBundle:Marque:Recherche2.html.twig',
        array("voitures" => $voitures,
            "form" => $Form->createView()));

}

我更改了视图：

<div id="div">
</div>

<div id="affichage">
    <table border="1">
        <tr>
            <td>Id</td><td>Libelle</td><td>pays</td>
        </tr>
        {% for i in voitures %}

            <tr>
                <td>{{ i.id}}</td>
                <td>{{ i.libelle}}</td>
                <td>{{ i.pays}}</td>

            </tr>

        {% endfor %}
    </table>

</div>
{{ form_start(form) }}
{{ form(form) }}
    {{ form_errors(form) }}
{{ form_end(form) }}

<script src="{{ asset('js/jquery.js') }}"></script>
<script>

    $("#myapp_parcbundle_marque_libelle").keyup(
            function(){
                var serie=$('#myapp_parcbundle_marque_libelle').val();
                var DATA =  {'libelle' : serie};
                $.ajax({
                    type: "POST",
                    url: "{{ path('demo_create')}}",
                    data:DATA,
                    success: function (data) {
                        $.each(data,function(k,el) {
                            $("#affichage").hide();
                            $( "#div" ).html("<ul></ul>");
                            $('ul').append(
                                    "<li>"+el.libelle+"</li>"+
                                    "<li>"+el.pays+"</li>"
                            );
                        });
                    },
                    error:function ()
                    {
                        console.log("error "+DATA);
                    }
                });
            });

</script>

如何使用Symfony和Jquery进行Ajax搜索

2 个答案:

问题：

解决方案（你非常接近）：