How to make a given ajax request in Symfony?

Question

JavaScript

I have a fixtures.html.twig page and a DefaultController.php controller.
in html there is a form that is submitted here, in fact, and it is:

<form method="POST" action="{{path('findaction')}}" >
                <div class="selection-box_criterion">
                    <p><strong>Назначение:</strong></p>
                    <p><input type="checkbox" name="prom" value="pr"><span>Промышленные</span><br>
                        <input type="checkbox" name="office" value="off"><span>Офисные</span><br>
                        <input type="checkbox" name="torg" value="tor"><span>Торговые</span><br>
                        <input type="checkbox" name="street" value="str"><span>Уличные</span><br>
                        <input type="checkbox" name="fito" value="fito"><span>Фито</span><br>
                        <input type="checkbox" name="azs" value="azs"><span>Для АЗС</span></p>
                </div>
                <div class="selection-box_criterion">
                    <p><strong>Мощность,Вт:</strong></p>
                    <p><input type="checkbox" name="144"><span>1-44</span><br>
                        <input type="checkbox" name="4589"><span>45-89</span><br>
                        <input type="checkbox" name="90199"><span>90-199</span><br>
                        <input type="checkbox" name="2001000"><span>200-1000</span><br></p>
                </div>

                <div class="selection-box_criterion">
                    <p><strong>Степень защиты:</strong></p>
                    <p><input type="checkbox" name="do50ip"><span>До 50 IP</span><br>
                        <input type="checkbox" name="do5167ip"><span>До 51-67 IP</span><br>
                        <input type="checkbox" name="do6888ip"><span>До 68-88 IP</span><br>

                </div>
                <div class="selection-box_criterion">
                    <p><strong>Назначение:</strong></p>
                    <p><input type="checkbox" name="vstraivaemie"><span>Встраиваемые</span><br>
                        <input type="checkbox" name="nakladnie"><span>Накладные</span><br>
                        <input type="checkbox" name="ulichnie"><span>Уличные(консольные)</span><br>
                        <input type="checkbox" name="podvesnie"><span>Подвесные</span><br>
                        <input type="checkbox" name="potolochnie"><span>Потолочные</span><br>
                        <input type="checkbox" name="nastennie"><span>Настенные</span><br>
                        <input type="checkbox" name="sdatchikom"><span>С датчиком движения</span></p>
                </div>
                <div class="selection-box_slider">
                    <p><strong>Световой поток, Лм:</strong></p>
                    <div id="slider-range"></div>
                    <p>
                        <input type="text" id="amount" readonly style=" width: 45px; float:left; border:0;  font-weight:bold;">
                        <label type="text" readonly style="width: 45px; float:left;border:0; margin-left:3px;  font-weight:bold; margin-top:-3px;" >-</label>
                        <input type="text" id="amount1" readonly style="width: 45px; float:left; margin-left:-37px; border:0;  font-weight:bold;">
                    </p>
                </div>
                <button class="selection-box_reset">Сбросить все</button>
                <input type="submit" value="go" name="submit">
                </form>

There is also a function in the controller that looks like this:

/**
     * @Route("/fixtures", name="findaction")
     */
    public function listFixturesAction(Request $request) {

        $promfixtures = $this->getDoctrine()->getRepository('ProjectBundle:promFixture')
                ->findAll();
  
        $officefixtures = $this->getDoctrine()->getRepository('ProjectBundle:officeFixture')
                ->findAll();
        $torgfixtures = $this->getDoctrine()->getRepository('ProjectBundle:torgFixture')
                ->findAll();
        $streetfixtures = $this->getDoctrine()->getRepository('ProjectBundle:streetFixture')
                ->findAll();
        $fitofixtures = $this->getDoctrine()->getRepository('ProjectBundle:fitoFixture')
                ->findAll();
        $azsfixtures = $this->getDoctrine()->getRepository('ProjectBundle:azsFixture')
                ->findAll();
        if ($request->getMethod() == "POST") {
            $promFixture = $request->get('prom');
            $officeFixture = $request->get('office');
            $torgFixture = $request->get('torg');
            $streetFixture = $request->get('street');
            $fitoFixture = $request->get('fito');
            $azsFixture = $request->get('azs');
            $power144 = $request->get('1-44');
            $power4589 = $request->get('45 and 89');
            $power90199 = $request->get('90-199');
            $power2001000 = $request->get('200-1000');
            $stepdo5ip = $request->get('do50ip');
            $stepdo5167ip = $request->get('do5167ip');
            $stepdo6888ip = $request->get('do6888ip');
            $vstraivaemie = $request->get('vstraivaemie');
            $nakladnie = $request->get('nakladnie');
            $ulichnie = $request->get('ulichnie');
            $podvesnie = $request->get('podvesnie');
            $potolochnie = $request->get('potolochnie');
            $nastennie = $request->get('nastennie');
            $sdatchikom = $request->get('sdatchikom');


            $em = $this->getDoctrine()->getManager();
            if(isset($_POST['4589'])){
            $searchByPowerProm = $em->createQuery(
                    'SELECT p
    FROM ProjectBundle:promFixture p
    WHERE p.power BETWEEN 45 and 89'); $resPowerProm = $searchByPowerProm->getResult();
    $searchByPowerOffice = $em->createQuery(
                    'SELECT p
    FROM ProjectBundle:officeFixture p
    WHERE p.power BETWEEN 45 and 89');$resPowerOffice = $searchByPowerOffice->getResult();
            $searchByPowerTorg = $em->createQuery(
                    'SELECT p
    FROM ProjectBundle:torgFixture p
    WHERE p.power BETWEEN 45 and 89');$resPowerTorg = $searchByPowerTorg->getResult();
            $searchByPowerStreet = $em->createQuery(
                    'SELECT p
    FROM ProjectBundle:streetFixture p
    WHERE p.power BETWEEN 45 and 89');$resPowerStreet = $searchByPowerStreet->getResult();
            $searchByPowerFito = $em->createQuery(
                    'SELECT p
    FROM ProjectBundle:fitoFixture p
    WHERE p.power BETWEEN 45 and 89');$resPowerFito = $searchByPowerFito->getResult();
            $searchByPowerAzs = $em->createQuery(
                    'SELECT p
    FROM ProjectBundle:azsFixture p
    WHERE p.power BETWEEN 45 and 89');$resPowerAzs = $searchByPowerAzs->getResult();
    $count = count($resPowerProm) + count($resPowerOffice) + count($resPowerTorg)
            +count($resPowerStreet) + count($resPowerFito)+count($resPowerAzs);
    return $this->render('ProjectBundle:Default:fixtures.html.twig',array(''
        . 'resPowerProm'=> $resPowerProm,''
        . 'resPowerOffce' => $resPowerOffice,''
        . 'resPowerTorg' => $resPowerTorg,''
        . 'resPowerStreet' => $resPowerStreet,''
        . 'resPowerFito' => $resPowerFito,''
        . 'resPowerAzs' => $resPowerAzs,''
        . 'count' => $count));
            }
       }

But that's not the problem, I've been trying to solve the search problem for a week without reloading the page. I read a lot of articles, answers to questions, and I just can’t send a request normally through ajax. But just using the action method, everything turns out ... Help me write a script, and if something needs to be changed, then what?

Answer 1

And here's how it handles html.twig received from php

<div class="products">
                <div class="title-bar">
                    <h1>Каталог продукции</h1>
                    <h2>{% if count is defined %}{{count}}{% endif %} товаров</h2>
                </div>
                
                 {% if resPowerProm is defined %}
                {% for fixture in resPowerProm %}
                <a href="/symfony/web/fixtures/prom/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif%}
                
                {% if resPowerOffice is defined %}
                {% for fixture in resPowerOffice %}
                <a href="/symfony/web/fixtures/office/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif%}
                
                {% if resPowerTorg is defined %}
                {% for fixture in resPowerTorg %}
                <a href="/symfony/web/fixtures/torg/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif%}
                
                {% if resPowerStreet is defined %}
                {% for fixture in resPowerStreet %}
                <a href="/symfony/web/fixtures/street/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif%}
                
                {% if resPowerFito is defined %}
                {% for fixture in resPowerFito %}
                <a href="/symfony/web/fixtures/fito/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif%}
                
                {% if resPowerAzs is defined %}
                {% for fixture in resPowerAzs %}
                <a href="/symfony/web/fixtures/azs/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif%}
                
                {% if promfixtures is defined %}
                {% for fixture in promfixtures %}
                <a href="/symfony/web/fixtures/prom/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif%}
                
                {% if officefixtures is defined %}
                {% for fixture in officefixtures %}
                <a href="/symfony/web/fixtures/office/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif %}
                
                {% if torgfixtures is defined %}
                {% for fixture in torgfixtures %}
                <a href="/symfony/web/fixtures/torg/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif %}
                
                {% if streetfixtures is defined %}
                {% for fixture in streetfixtures %}
                <a href="/symfony/web/fixtures/street/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif %}
                
                {% if fitofixtures is defined %}
                {% for fixture in fitofixtures %}
                <a href="/symfony/web/fixtures/fito/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif %}
                
                {% if azsfixtures is defined %}
                {% for fixture in azsfixtures %}
                <a href="/symfony/web/fixtures/azs/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif %}
                
                {% if resProm is defined %}
                {% for fixture in resProm %}
                <a href="/symfony/web/fixtures/prom/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %}
                {% endif %}
               
                {% if resTorg is defined %}
                    {% for fixture in resTorg %}
                <a href="/symfony/web/fixtures/torg/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %} 
                {% endif %}    
                
                 {% if resOffice is defined %}
                    {% for fixture in resOffice %}
                <a href="/symfony/web/fixtures/office/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %} 
                {% endif %}
                
                 {% if resStreet is defined %}
                    {% for fixture in resStreet %}
                <a href="/symfony/web/fixtures/street/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %} 
                {% endif %}
                
                 {% if resFito is defined %}
                    {% for fixture in resFito %}
                <a href="/symfony/web/fixtures/fito/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %} 
                {% endif %}
                
                 {% if resAzs is defined %}
                    {% for fixture in resAzs %}
                <a href="/symfony/web/fixtures/azs/{{fixture.id}}"><div class="products_item">
                        <div class="products_item_bg" style="background: url({{fixture.picture}}); background-size: cover"></div>
                        <h1>{{fixture.name}}</h1>
                        <p>{{fixture.shortDesc|raw}}</p>
                    </div></a>
                {% endfor %} 
                {% endif %}

            </div>