javascript - Symfony 搜索表单无需重新加载页面

Question

我使用symnfony并有通过参数搜索实体的表单，但是当提交表单时我的页面重新加载，我不知道在填写字段时如何实现搜索表单，并且在表单下我有结果而无需重新加载页面，就像写入字段一样一些词，这次在更新 block 下显示结果

这是我的带有操作的表单，操作等待获取参数并在此 View 中使用表单和结果进行渲染

    <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实现无需重新加载和实时搜索？

Answer 1

下面是一个使用 jQuery 通过 ajax 发布表单的示例:

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

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