没有重新加载页面的 Symfony 搜索表单答案

【问题标题】：Symfony search form without reload page没有重新加载页面的 Symfony 搜索表单
【发布时间】：2017-02-13 07:54:40
【问题描述】：

我使用 symnfony 并通过参数为搜索实体提供表单，但是当提交表单时我的页面重新加载，我不知道在填写字段时如何实现搜索表单，并且在表单下我有没有重新加载页面的结果，比如在字段中写入一些单词，此时在更新块下，结果是

这是我的表单，带有动作，动作等待获取参数并在此视图中呈现表单和结果

    <div class="filters" id="filter_form">
    <form action="{{ path('outbound_invoices') }}" method="get">
        <div class="choice-group" role="group" data-toggle="buttons">
            <label class="btn active">
                <input type="radio" name="status" value={{ status_draft }} checked="checked">{{ status_draft|trans }}
            </label>
            <label class="btn">
                <input type="radio" name="status" value={{ status_sent }}>{{ status_sent|trans }}
            </label>
            <label class="btn">
                <input type="radio" name="status" value={{ status_paid }}>{{ status_paid|trans }}
            </label>
        </div>

        <div class="choice-group" role="group" data-toggle="buttons">
            <label class="btn active">
                <input type="radio" name="type" value="all" checked="checked">all
            </label>
            <label class="btn">
                <input type="radio" name="type" value="contract">contract
            </label>
            <label class="btn">
                <input type="radio" name="type" value="other">other
            </label>
        </div>

        <input name="search" id="filter-employees" placeholder="{{ 'search'|trans }}" class="form-control">
        <p>from Date: <input type="text" name="from_date" id="from_datepicker" dataformatas="dd-mm-yyyy"></p>
        <p>to Date: <input type="text" name="to_date" id="to_datepicker" dataformatas="dd-mm-yyyy"></p>
        <input type="submit" value="Submit">
    </form>
</div>
// block result
<table class="table">
    <thead>
    <tr>
        <th>
            {% trans %}invoice_number_short{% endtrans %}
        </th>
    </tr>
    </thead>
    <tbody>
        {# @var outboundInvoice \AppBundle\Entity\OutboundInvoice#}
        {% for outboundInvoice in outboundInvoices %}
        <tr class="clickable" data-href="{{ path('outbound_invoices_show', {'id': outboundInvoice.id}) }}">
            <td>
                {{ outboundInvoice.invoiceNumber }}
            </td>
            {% endfor %}
        </tr>
    </tbody>
</table>

实际上，我只是为查找实体和在模板中呈现创建查询构建器。不用重新加载和实时搜索的ajax是如何实现的？

【问题讨论】：

你应该阅读 Ajax。
我知道，但我没有 js 和 ajax 的经验，我了解 action return json 以及我不知道如何使用这个 json，也许一些例子对我有帮助
只要谷歌“开始使用 ajax”，你会发现一堆教程。特别是因为您似乎已经在使用 jQuery。 SO 不适合那些人。

标签： javascript php jquery forms symfony

【解决方案1】：

这是一个使用 jQuery 通过 ajax 发布表单的示例：

var form = $('#my-form');

$.post(
    form.prop('action'),   //action url
    form.serializeArray(), //serialized form data
    function(result){      //callback
       console.log(result);
    }
);

【讨论】：

【解决方案2】：

像往常一样使用 AJAX：

//add jquery here
$('#filter-employees').click(function(e){
    e.preventDefault();
    $.ajax({
        action:"/invoices"
        //...
    }).done(function(resp));
});

然后在控制器动作中，您需要验证请求是否为 XMLHttpRequest 请求，并相应地创建功能。

/**
 * @Route("/invoices", name="outbound_invoices")
 */
public function processAction(Request $request)
{
    if ($request->isXmlHttpRequest()) {
        //do work
    }

    return $this->redirectToRoute('whatever');
}

OBS：我建议你使用 Angular 来处理这类事情。

【讨论】：